Copyright: Copyright © 1998 by James S. Derry, All Rights Reserved
Citation: Copyright © 1998 by James S. Derry, All Rights Reserved


Table of Contents

Balthisar Software Site

Balthisar Cascade application and associated help file, Copyright © 1998 by James S. Derry. All Rights Reserved in the USA and abroad.

About this Help File

About Balthisar Cascade

What's New

Known Issues

What's in Store

Beta-Testing Philosophy

Delphi Developers

Version History

CSS2 Classes Overview

HTML Elements (Element Classes)

Classes

Subclasses

Psuedo-Classes and Pseudo-Elements

Psuedo-Classes of Subclasses

Contextual Classes

ID's (ID Classes)

Custom/Expert Classes

Balthisar Cascade Overview

Interface Elements

Class List

Class List Contextual Menu

Preview Pane

Preview Pane Contextual Menu

Attributes Panes

The Shortcut Bar

Preferences

Main Menu

Documents Tabs

The HTML Color Picker

CSS2 Attributes in Detail

Font Attributes

Text Attributes

Alignment Attributes

Margin Attributes

Borders Attributes

Color/Background Attributes

Rendering Attributes

Box Dimensions Attributes

Generated Content Attributes

Lists Attributes

Tables Attributes

Miscellaneous Attributes

Aural Settings Attributes

Aural Characteristics Attributes

Balthisar Cascade Tips, Tricks, and Shortcuts

Whole Numbers and Spin Editors

Default Measurements

Cutting, Copying, and Pasting

Drag-and-Drop

Document Templates

default.wwtd

Variations on creating new documents

Variations on renaming classes

Practical Use of Balthisar Cascade

 	Cascade file types

Creating a new document

Saving a document

Opening a document

Creating a default set of elements

Including CSS2 in HTML

Contacting Balthisar Software


sa: Balthisar Homepage
Balthisar Software Website

Balthisar Software Feedback Page

Balthisar Cascade Homepage

Check for new versions of Cascade

Send Email to Balthisar


About this Help File
About this Help File (release 2.0b9)

Table of Contents          Balthisar Software Site

Lineage

Since the release of version 2.0b4, this help file is "complete," meaning we think it is done. Of course, nothing is every really complete, so we depend on your feedback to make changes and otherwise improve the help file.

This help file is not meant to be a replacement for adequate knowledge of the CSS2 specification. To make truly impressive stylesheets, some advanced knowledge of CSS2 is in order. To gain this knowledge, probably the best reference to CSS2 is from the people who wrote it: the World Wide Web Consortium. Much of the text related to CSS2 descriptions in this help file is from the official specification, and you can download the Adobe PDF version (suitable for printing) right here: http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

Hyperlinks

The hyperlinks in this help have been color-coded to ensure that you do not connect to the internet unless you truly intend to. As is standard for Windows help files, internal hyperlinks are green and underlined. For example, Table of Contents will take you to the table of contents within this file.

There are also several links throughout which connect to internet URL's or other internet services. When these are clicked upon, the appropriate application will launch, and your operating system will attempt to connect to the internet, if it is not already connected. These "external" hyperlinks are blue, as in the fashion of HTML documents. For example, http://www.balthisar.com will take you to the Balthisar Software homepage on the internet.

Gender

This help file uses the standard English convention of referring to unknown genders in the masculine. This is an attempt to simplify both the writing and clarity of this document. Its use is not intended to alienate nor offend members of any sex.

Useful Tools

This help file was generated with a thoroughly useful shareware application called HelpScribble, available on the internet for a free trial at http://www.ping.be/jg.

Credit

Some of the attributes' descriptions were blatantly copied directly from the W3C's specification document. The original version of this help file incorrectly stated that the document was "in the public domain," which it is not. In accordance with WC3's copyright policy:

•	A current version of the CSS2 Specification Document can be downloaded from http://www.w3.org/TR/1998/REC-CSS2-19980512/css2.pdf.

•	Portions of the text included in this help file are "Copyright © World Wide Consortium (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University), All Rights Reserved."

•	The status of the original document used does not exist. The original document is W3C's proposed recommendation dated 24-March-1998.


About Balthisar Cascade

Table of Contents          See Also         Balthisar Software Site

Thank you for taking the time to try out Balthisar Cascade, the next incarnation of the premier internet development product from Balthisar Software.

Balthisar Cascade is intended for the creation of specification 2 Cascading Style Sheets (CSS2) for inclusion into HTML documents on networks such as the internet.

Balthisar Cascade includes most of the features an ameteur or professional HTML developer needs to create publishable hypertext documents. It follows the CSS2 specification as set forth by the World Wide Web Consortium. Cascade currently supports CSS2 strictly, i.e., it does not support proprietary extensions to CSS as used in Microsoft's Internet Explorer, and it does not support JavaScript style sheets at all.

Balthisar Cascade was previously known as WebWarrior Cascade. The WebWarrior moniker was dropped to avoid confusion with some existing products on the internet which already bear the "WebWarrior" name. The Balthisar moniker was added to avoid confusion with certain other products also named Cascade. So, the entire, proper name of this application is Balthisar Cascade, but within this document and the application itself, the name Cascade will suffice.

Some of Balthisar Cascade's features include:

• Creation of Classes

• Creation of Subclasses

• Creation of Pseudo-Classes and Pseudo-Elements

• Creation of ID's

• Creation of Element Classes

• Creation of Custom or Expert Classes

• The ability to set cascading order

• NEW! Managment of various media types.

• NEW! Allows multiple specification of CSS selectors.

• The ability to export data as an HTML file or a CSS2 file

• Many nice gems that make editing a Cascade document a pleasure.

Some of Balthisar Cascade's limitations include:

• No ability to import existing CSS2 files exists. Due the various methods which the CSS2 specification allows rules to be defined, as well as time-to-market issues, Balthisar Cascade will not interpret such documents at this time. Tools will be developed which will allow this functionality.

• The ability to open WebWarrior Cascade documents is not present, due to the complete redevelopment of the file structure. Note: since this is now Balthisar Cascade, then Balthisar Cascade documents will open fine!


sa:About Balthisar Cascade
About Balthisar Cascade

What's New

Known Issues

What's In Store...

Beta Testing Philosophy

Delphi Developers

Version History


What's New
What's New in 2.0b9

Table of Contents          See Also         Balthisar Software Site

Cascade's most prominent new feature is the ability to manage multiple "media types," as specified by the W3C. This means that a Cascade-generated stylesheet can now invoke different style rules, depending upon the media in which your stylesheet is used. Note: it's up to the particular browser to use different media type rules. Media-type enabled documents are mostly backward compatible with older versions of Cascade. Older versions of the application will open newer documents without crashing or doing anything strange. We decided not to upgrade the document format at this time to facilitate this.

In addition, the screen display has been fixed for certain users who changed particular Windows fonts. This resulted in a particularly messy display of the Cascade screen. Cascade now ensures that its display is static, no matter the resolution and fonts of the monitor on which it runs.

In order to allow the new media types to work, it was also necessary to allow the user the option to turn off the "hand-holding" feature that prevented users from creating selectors with duplicate names. The reason for this is that different media types probably will have the same selectors. A fringe benefit of this is that users can now use multiple specifications of selectors for any other reason allowed by the CSS2 specification. In other words, Cascade just got a whole lot more flexible for advanced users.

Several interim versions of Cascade have surfaced over the last couple of months. These were efforts to prevent a bug from occurring in certain versions of the Windows operating system, whereby files could not be saved or exported. Since release 2.0b6, we're proud to say that there have been no new occurrances of this bug reported!


Known Issues

(Really more of a FAQ at this stage)

Table of Contents          See Also         Balthisar Software Site

This section covers known Cascade issues.

1. Preview All Classes and Preview Tagged Classes modes revert to single class preview.

This is not a bug; it's a feature. Really. This makes it simpler for the stylesheet author to keep his focus on the class which he is editing. There are currently no plans to prevent the preview pane from exhibiting this behavior.

2. There should be a file picker for the background image file.

That would be a better idea for an integrated HTML development environment. Because Balthisar Cascade is intended for developing style sheets to be placed on a server computer, a local file picker would not be convenient, since the local file path will not be the same as the remote file path. What use is a local Windows' file path on a Unix or Macintosh server (which is what 80% of the internet uses)?

Instead, you should simply type the name of the image, including an absolute or relative path to that image, from the perspective of the stylesheet as it will reside on the server.

3. The font drop-down lists allow me to type fonts which don't exist.

Just because a font doesn't exist on your computer does not mean it does not exist on someone else's computer. The contrary is also true, which is the whole reason CSS2 provides the ability to specify alternate fonts.

I've seen CSS2 editors which force the user to pick a font which exists on the local system, which does no good for specifying fonts for other systems, including systems utilizing other operating systems. You should take it to heart to try to accomodate the fonts on alternate operating systems as your alternate font. For example, the following two rules are fairly standard on the internet:

font-family: "Times", "Times New Roman", serif;

font-family: "Helvetica", "Arial", sans-serif;

The primary font-family names shown are fonts typically found on Macintosh computers. While the order is not important, accomodating other operating systems should be considered a primary design principle. This would not be possible if the CSS2 editor forced you to choose a font which resides on the local system.

4. The font drop-down lists act strangly when I have them set to display in their own font.

Again, that's a feature, not a bug. The "strangeness" referred to comes in two flavors:

•	As you type the name of a font, and what you have typed "so far" is a valid system font, the font name will change to that typeface, as you type.

•	The font in the font-picker temporarily reverts to your standard window font (usually MS Sans Serif) whenever you drop the list down. This enables you to read the name in the text-box (in case it's a symbol font or a fancy script which is illegible at a small size), as well as the drop-down list itself. As soon as a choice is made, the text-portion will change back to its own font.

5. WebWarrior Cascade 1.0b1 and 1.0b2 Projects won't open in this version

Sorry. That's one of the risks of beta software. It would be too much of an overhead to maintain compatability with every beta version of software.

Rest assured, however, that we've finally developed a file format we can live with. It's designed for future enhancements in mind. Even if new features are added to later versions of Cascade, the application you are using now will still be able to use those advanced files! Of course, the converse is true, as well.

Cascade is also designed to allow integration of external tools. One of the first tools to be developed will be, in fact, a file converter so that Balthisar Cascade can open old WebWarrior Cascade projects.

TECH NOTE: merely changing the file extension to the new standard will not work. It's much more involved than that, so unless you want to crash Cascade, don't try to open your old documents.

6. My exported data doesn't show up with .HTML or .CSS extensions.

This occurs because you web browser has registered those file extensions to themselves. On my system, for example, HTML files appear as "HTML File," and CSS files appear as "Hypertext Stylesheet." To correct the extensions "problem" (and we recommend that the serious HTML author turn on extensions for all internet file types), you can use the View/Options command from any shell window to choose exactly how the file type is displayed, and whether or not the extension is always displayed (even if "hide extensions for registered filetypes" is turned on). Just select the File Types tab, choose the type of file for which you would like to see the extension, and hit the Edit button. You should then see a window similiar to that below. Highlighted in the illustration is the check box you need to have checked to always see the extension.

7. I selected a named HTML color in the color picker. It showed up okay in the spin editor and in the CSS code. But next time I activated the color picker for that spin editor, it showed the name of a different color!

This will happen only on occassions where the HTML standard has defined two names for the same color. Internally, Cascade keeps track of all colors by their RGB values, and looks up the name of the color in a table. Because a very few HTML named colors have the same RGB value with different names, Cascade will attempt to use the first name it comes across when looking up the color. This should only prove mildly irritating. Just go ahead and use the name Cascade gives you, because despite any difference in names, the colors really are exactly the same.

8. I spent 40 minutes setting up 40 custom colors in the color picker, and they were really perfect! But next time I used the color picker, none of my colors were there! What a waste of time! Or I spent... adding HTML elements to the Element pick-list... Or I spent... adding new Pseudoclasses to the Pseudos pick-list...

You do know that the human interface guidelines from both Microsoft and Apple specify that if any dialogue box is cancelled, the changes made therein are to be disregarded. Therefore, be sure to exit the color picker by choosing Okay, and not Cancel. This same advice goes for adding items to the drop-down lists in the two pickers for Elements and Pseudoclasses.

9. Your program is too large for my screen! Fix it!

Balthisar Cascade requires at least an 800x600 display properly, and the more colors the merrier. I honestly tried to accomodate the stragglers who have 640x480 displays at first, but the elements in the Cascade window are on the verge of being cramped as-is. If you're stuck with an old-fashioned, single-synch monitor that can do no better than 640x480, two things you can try are (1) Detach the Class List and the Code Preview Pane from the main window, and allow them to overlap, or (2) play with the Windows Display Control Panel, so that your desktop area is larger than the screen-size. This will only work if your video card has memory for the larger-size display.

In any event, at 640x480, Cascade is quite useable.


What's in Store

Table of Contents          See Also         Balthisar Software Site

The future of Balthisar Cascade is looking like this right now:

•	Version 2.0b9 will need to have its bugs fixed, if there are any remaining, and if the beta-testers report them faithfully.

•	A live-preview plug-in is planned. This will enable Cascade users who have IE4+ installed on their systems to see near-instant results of their stylesheet modifications (the Cascade application currently allows a preview in browser feature which works in conjunction with existing HTML markup).

•	An import-css plug-in is in development. This will allow Cascade to import existing CSS files, and to parse existing HTML files into Cascade.

•	Eventually, version 2.0 will move out of beta, which means I will no longer distribute the application for free. If you still have the beta version at that time, then it's yours to keep and use forever (this program will not expire). But if you enjoy the application and want continued support, you may want to consider obtaining the shareware version in the future. There is no anticipated date for this transition yet -- the application must be "perfected" first.

•	The shareware version will be released. This application and its help file are the result of over 1200 hours of work. At an average programmer's pay, you can do the math and figure out its value. Because the shareware version will likely cost US$10-$20, I would have to receive 2,250 to 4,500 paid registrations  to "break even." As you know, that is probably a ridiculous number, and you should see that I really do all this work for the mere love of it.

•	New! The Freeware/Shareware plan has been finalized! A single version of Cascade will be released that is both Shareware and Freeware. Users can choose to register if they care to, and they won't be made to feel guilty if they don't (i.e., there will be no annoying, constant reminders except for the first time the program is run). The Freeware/Unregistered version will lack only one feature -- the ability to use plug-ins.


Beta-Testing Philosophy

Table of Contents          See Also         Balthisar Software Site

"Beta" software is not really "free" software. By using the software, you have agreed to a license. The license does not require that you, the user, report information to the application developer.

However, beta software is released free-of-charge for the purpose of soliciting feedback about the quality of an application. Some large mega-corporations release program suites, and even entire operating systems, for the purpose of beta-testing, without informing the user, and charging anywhere from $100 for a simple Windows-based operating system to $500 for a full Office suite. These same companies then have the nerve to charge the user additional money for "telephone support" in order to report the bugs!

Part of a beta-tester's moral obligation is to report bugs and suggest ideas for the application. This is a meager pittance for free use of a valuable application. So, dear user, please do your part!

Submitting feeback is especially easy if you have a connection to the internet, which you most likely do, since you are using this application. Please see Contacting Balthisar Software for simple contact information.

If you do find that Cascade experiences problems, please remember to tell us how to duplicate the problem, step-by-step. If the problem only occurs in certain files, go ahead and attach the file in an email letter to us. This help file can probably also benefit from criticism, as well. If you notice a grammatical error, an invalid or malfunctioning link, etc., please feel free to report it!


Delphi Developers

Table of Contents          See Also         Balthisar Software Site

Borland Delphi developers may be interested in including support for the *.WWS2 documents created by Balthisar Cascade. A free (compiled) Cascade Document class will soon be available which allows a Delphi 4.0+ application to generate CSS code from a Cascade document. As soon as the documentation is written, it will be available in beta-form.

Additionally, the editor itself will be made available as a complete VCL component for application designers who wish to support the editing of Cascade documents. Release of this component is pending the writing of the documentation. A license for unlimited use of the component will apply.

For those truly interested, this entire application consists of exactly:

•	One TCascadeDLOG component

•	One custom personalization component

•	One Data Module to house the components

Please continue to monitor  Balthisar Software for more details.


Version History

Table of Contents          See Also         Balthisar Software Site

What follows is the Balthisar Cascade version history.

2.0b7 Released 14-Feb-98 (Current Version)

•	Added support for @media rules within the existing document architecture.

•	Added a preference option to ignore duplicate selector creation.

•	Employed tree-view icons for easily distinguishing between CSS classes and @media descriptors.

2.0b8 Released 20-Jan-99

•	Made all text items static, i.e., bypassed Windows' intrusion of its own fonts. Not neccessarily the best method of stabilizing Cascade's display, but the application now looks proper regardless of the system fonts currently in use.

•	Note: this version was never officially released; it was distributed only to persons who raised the messy display issue.

2.0b7 Released 08-Jan-98

•	Rewrote a private interface to GetOpenFileName and GetSaveFileName OS calls to bypass Microsoft's inept implementation.

•	Several internal code changes not visibly apparent to the end user.

2.0b6 Released 03-Dec-98

•	Repaired (we hope) a file-saving bug which affected random systems.

•	Reimplemented the Splash-Screen scheme. This is an internal change.

•	Reimplemented the Cascade component interface. This will only apply to those who have gotten the alpha-releases of the Cascade component for Delphi 4.

•	Added a hint to the documents tabs which shows the complete path of the active document when the mouse hovers over it.

•	Corrected a bug in the "Apply to HTML" function which severely affected the layout of the original HTML file. Now, the original layout is preserved almost perfectly.

•	Added a default.wwtd in the setup program.

•	Added a preferences item which allows the user to choose between using single-quotes and double-quotes when generating CSS code.

•	HTML Elements (when creating a new Element Class) are now chosen using an editable pop-up list instead of demanding that the user specify a valid HTML element.

•	Pseudoclass or pseudoelement names are now chosen using an editable pop-up list, instead of a static pop-up list.

•	Added the ability to open files by dropping them onto the main window.

•	Shell file opening is now performed via DDE.

•	The "pdsss" CLI parameter will start Cascade without displaying the splash screen.

•	The "miaok" CLI parameter will start more than one instance of Cascade.

•	The uninstaller now properly removes all of its registry entries, except for preferences items, just in case the user decides to reinstall Cascade at a later time.

2.0b5 Released 16-Oct-98 (not officially released, but it may be floating around)

•	Version 2.0b4 added support for .HTM files. Unfortunately, this caused the "Tools/Apply Stylesheets to HTML" command to malfunction. This has been corrected.

•	Stopped changing the registry key for every new beta release. This caused all of the preferences, personalization, and custom colors to be reset every time the user upgraded. The current key will now stay at "v2.0" for future compatability (yes, this means you have to reset all of your preferences with this release again).

2.0b4 Released 05-Oct-98

•	"Finished" the help file. Feedback as to its usefulness is appreciated.

•	Eliminated the splitter which allows the main window and its panes to be resized. This feature was not favorably received, and it was terribly crude.

•	The Shortcut Bar has been changed from a static item to a dockable tool bar, which can be dragged from the main window to any part of the screen.

•	The Class List and Code Preview Pane are now dockable (because, as mentioned above, the splitter was removed). These can be detached from the main window, and moved about the screen independantly.

•	A "View" menu was added. It allows alternate methods of detaching the Shortcut Bar, the Class List, and the Code Preview Pane.

•	The "Show Shortcut Bar" option was removed from the preferences, since this setting is now dynamic based on how the user treats the dockable Shortcut Bar.

•	Changed the root registry key from HKEY_LOCAL_MACHINE to HKEY_CURRENT_USER for WindowsNT compatability (WinNT doesn't allow write access to HKEY_LOCAL_MACHINE unless the user is logged on as an administrator).

•	Moved the Documents Tabs from the top of the window to the bottom of the window, where it more suitably fits. Also modified the status area to allow the main window to shrink enough when the Class List and Code Preview pane are detached.

•	Scrapped my own installation/uninstallation setup in favor of InstallShield again. The original WebWarrior Cascade is an InstallShield setup project, despite all of InstallShield's registry-related bugs. InstallShield 2.02 now has those bugs fixed, hence my flakey install program is no longer needed.

•	Added support for the non-standard, archaic .HTM file extension where appropriate.

2.0b3 Released 13-Sep-98

•	Fixed a bug I introduced in replacing a different bug -- 2.0b2 correctly used the pound/hash mark (#) instead of the dollar sign ($) to display hexadecimal colors, except that it caused "#xxxxxx is an invalid integer" errors when switching panes/classes. *This time* it's fixed!

•	Updated this help file a bit.

2.0b2 Released 12-Sep-98

•	Added a tiny bit to the help file, including a WinHelp32 Table of Contents

•	Created a new install/uninstall application, including registry items to correctly associate icons and applications.

•	An event-processing related error was corrected. The effect of the bug resulted in strange reversions of data in the attributes' panes when pages were switched.

•	The DEL accellerator key (to clear a class in the class list) was changed to Ctrl-DEL, because the previous implementation of this caused the DEL key not to work properly in text-editing fields.

•	An "Export" icon has been added to the shortcut bar. Unlike the other shortcuts, it drops down a menu which allows you different exporting options.

•	A default filename will now be provided in the Save As... dialogue when you export your Cascade documents. Previously, no default name was provided.

•	Hexadecimal colors now use the web-content # prefix instead of the programmers' $ prefix.

•	For some reason, I had introduced a bug in 2.0b1 that caused Pseudo-classes not to be created with names at all. This has been fixed, and you can create all of the Pseudo-classes you wish.

•	Updated the directory picker (in the preferences) to the modern style everyone seems to like.

•	Changed all internet links to reflect my new internet domain.

2.0b1 Released 15-Aug-98

•	Initial release of the 2.0 series software.

2.0a1 Released 01-Aug-98

•	Initial, unofficial release.


CSS2 Classes Overview as implemented in Cascade
CSS2 Classes Overview

(As Implemented by Balthisar Cascade)

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Balthisar Cascade makes it simple to create a variety of the basic classes as defined in the W3C's specification document. It also permits the advanced user to create classes having any selector, so that he doesn't have to be hampered by the implementation of basic classes.

This help section is intended to provide a brief background of the types of classes you can create in Cascade. It is not intended to explain how to successfully use any type of class, nor how to create valid selectors for more advanced classes.

The first thing to know is, what exactly is a class (in the general sense)? In CSS2 and in Cascade, a class is a style rule that governs how a certain element is rendered on the screen, on the printed page, or aurally. A class consists of certain named attributes, each of which can have different values. For example, "Font-Familiy" is an attribute of any class, and it can have a value such as "Helvetica."

Additionally, each class has a name or label which distinguishes the class from all other classes. This label allows the user agent to select the proper attributes to match the on-screen element. Hence, this name or label is properly known as a "selector."

Cascade's class list shows a list of selectors and media descriptors. The attributes of each class are set in the attributes panes. The CSS2 code is shown in the preview pane. The selectors in the class list will often be referred to as a class, because the selector represents the entire class.

Cascade and the CSS2 specification recognize different types of classes, which behave in different ways in the user agent. Cascade makes using the basic classes as fool-proof as possible, and also provides the means for more experienced users to create any type of advanced selector. All types of classes are identical to each other, except for the format of the selectors, and how the classes are implemented.

The classes supported in this version of Cascade are:

 Element classes

 Classes

 Subclasses

 Pseudo-classes and Pseudo-elements

 Pseudo's of subclasses

 Contextual classes

 ID classes

 Expert/Custom classes

 @media descriptors


sa: Cascade Class Types
Element classes

Classes

Subclasses

Pseudo-classes and Pseudo-elements

Pseudo's of subclasses

Contextual classes

ID classes

Expert/Custom classes

@Media Descriptors


Element Classes

Table of Contents        Balthisar Software Site [image]        Cascade Classes

An "Element Class" in Cascade refers to a class that applies to an HTML element at all times. In way of example, consider how the <P> (paragraph) element is typically rendered in your web browser. In most browsers, <P> text looks very similar to the text you are now reading. This is because your web browser's default style sheet has a element class called P which defines the way <P> text looks. Suppose we created a stylesheet which looks like this:

P	{ font-family: "Arial" }

Now, any time we use the <P> element, our paragraphs would look more like this one, because we created an Element Class, that is, a class that applies to an HTML element.

To create new element classes in Cascade, use the Classes/New Element... command in the main menu.

Note: in Cascade, all Element Classes are forced into all capitalization. This helps distinguish them visibly from other types of classes. In addition, the user is permitted to type almost any HTML element name, even elements which do not exist in HTML. This keeps Cascade from becoming outdated, but it allows typos.


Classes

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Unfortunately, a "Class" in Cascade refers to two different things:

•	Any CSS2 class in general, as described in the overview. For example, an "Element class" is a type of class.

•	And as described below, a specific type of class, called simply enough, a "class" is a type of class in its own right.

In CSS2 and Cascade, the class of type "Class" can be applied to any element at any time. Its selector takes the form ".classname" (take note of the initial period or dot). Whenever an HTML element uses a CLASS attribute with the value set to the class name, the class' attributes affect the element's rendering. For example, if...

the stylesheet has:

.classname {font-family: "Helvetica"}

and the HTML has:

<P CLASS=classname>

...then the <P> element will display with all of its normal CSS attributes, except for those which have been overridden in the class .classname; in the above example, the <P> element would be rendered using the font "Helvetica" instead of <P>'s default font. Notice that the <P> element's CLASS attribute does not include the initial period of the class name.

To create new element classes in Cascade, use the Classes/New Class... command in the main menu.


Subclasses

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Like a class of type "Class," subclasses in CSS2 and Cascade are applied to HTML elements by the user agent. Whereas a class can be applied to any element, subclasses are designed for one element specifically. The selector for a subclass takes the form "ELEMENT.subclass" (where ELEMENT is the HTML element you would subclass). For example, if...

the stylesheet has:

P.subclass {font-family: "Helvetica"}

and the HTML has:

<P.subclass>

...then the <P.subclass> becomes a new element, in a manner of speaking. This HTML tag will then display the content with all of the normal CSS attributes for the <P> element, except for those which have been overridden in the subclass; in the above example, the <P.subclass> tag's content would be rendered using the font "Helvetica" instead of <P>'s default font.

To create new subclass in Cascade, make sure that an Element class is selected in the class list, and execute the Classes/Subclass... command from the main menu, or select Subclass... in the class list's contextual menu.


Pseudo-Classes and Pseudo-Elements

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Pseudo-classes and pseudo-elements permit the creation of classes that apply to classes, subclasses, and element classes in somewhat dynamic situations. For example, in your own experience in using web browsers, your <A> elements usually display in a different color, depending upon whether you have visited the link or not. This is an example of a dynamic situation; the same <A> element class acts as if it has a different "Color"attribute value, depending on whether or not the link has been visited. This is accomplished using Pseudo-classes. For example...

the stylesheet has:

A:visited {color: red}

A:link {color: blue}

and the HTML has:

<A HREF="somewhere">Link to Somewhere</A>

... then depending on whether the link has been visited or not, the user agent will dynamically select which pseudo-class to apply to the content of the <A> tagset.

As you should have noticed, the selector for a pseudo-class or pseudo-element takes the form of "ELEMENT:pseudo" (where ELEMENT is an HTML element).

To create new pseudo-class or pseudo-element in Cascade, make sure that an Element class is selected in the class list, and execute the Classes/Pseudoclass... command from the main menu, or select Pseudoclass... in the class list's contextual menu.

To see a description of the applicable pseudo-classes and -elements supported in Cascade, follow any of the following links.

 :first-child

 :link

 :visited

 :hover

 :active

 :focus

 :first-line

 :first-letter

 :before

 :after


Pseudos of Subclasses
Pseudo-classes of Subclasses

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Cascade distinguishes between a run-of-the-mill Pseudo-class and a Pseudo-class of a subclass in order to better support novice users. Just as any Element class can have associated Pseudo-classes, subclasses can have Pseudo-classes as well. The selector takes the form "ELEMENT.subclass:pseudo" (where ELEMENT is a valid HTML Element). For example:

A.framelinks:visited {Color: red}

If the above style rule is included with your HTML document, any time the <A.framelinks> tag is used, visited links will be rendered in red. However, because in this example we didn't create a pseudo-class for the <A> Element class, your <A> tags' content will be rendered according to the user agent's default stylesheet.

To create new pseudo-class or pseudo-element of a subclass in Cascade, make sure that a subclass is selected in the class list, and execute the Classes/Pseudoclass... command from the main menu, or select Pseudoclass... in the class list's contextual menu.

Please the the Pseudo-Classes and Pseudo-Elements topic for more information.

To see a description of the applicable pseudo-classes and -elements supported in Cascade, follow any of the following links.

 :first-child

 :link

 :visited

 :hover

 :active

 :focus

 :first-line

 :first-letter

 :before

 :after


Contextual Classes

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Contextual classes make it possible to tell the user agent that certain CSS2 style rules should be applied to Element classes only if they are preceded by particular other elements. For example, suppose you are content to leave the default styles for the <P> HTML Element alone, except when the <P> element occurs in a <TABLE> tagset. One option could be just to create a subclass of <P>, and remember to use it inside of any tables you may have on your page. Another alternative is to create a contextual selector, as shown in the example:

the stylesheet has:

TABLE P {font-family: "Helvetica"}

and the HTML has:

<P>Hello there

<TABLE ROWS=1 COLS=1 WIDTH=50%>

<TD><P>Sentence in a table</TD>

</TABLE>

If we were to see the example in the user agent, the paragraph "Hello there" would be rendered using the default style for content of a <P> element. However, the paragraph "Sentence in a table" would be rendered in the "Helvetica" font, because the <P> element occurred nested somewhere within a <TABLE> tagset.

They type of contextual selector implemented is called a descendant selector. There are also other types of contextual selectors supported by the CSS2 specification, and you can create these by creating a Custom/Expert Class. The CSS2 Specification from W3C examplifies the other types of contextual selectors.

To create new contextual class in Cascade, make sure that an Element class is selected in the class list. This should be the nesting element, i.e., the element tagset inside of which your contextual class is valid. Then, execute the Classes/Contextual Class... command from the main menu, or select Contextual Class... in the class list's contextual menu. If you wish to create a contextual class for which there is not already an element in the class list, you must use use a Custom/Expert Class*.

*Actually, there are two "holes" in the program that will allow you to create a Contextual Class without having the context-element in the list, and without having to create a Custom/Expert class. Any class of any type which is dragged-and-dropped from one document to another, and the selector doesn't already exist in the destination document, will be added to the destination document. Also, it's possible to create an Element class temporarily, create a contextual class, and delete the temporary Element class.


ID Classes

Table of Contents        Balthisar Software Site [image]        Cascade Classes

ID classes in CSS2 and Cascade are implemented similarly to classes. Just as elements may specify a CLASS attribute within the tag to utilize a class, elements can also specify an ID attribute within the tag to utilize an ID class. ID classes take the form "#classname" (note the pound/hash sign preceding the name). For example, if...

the stylesheet has:

#xyz {color: red}

and the HTML has:

<P ID=xyz>Hello, world!

... then the phrase "Hello, world!" would be rendered using all of the default styles of <P>, except for what the class overrides, in this case, the color. "Hello, world!" would be rendered in red. Notice that in HTML, the ID attribute value for elements does not include the initial pound/hash sign.

To create new ID class in Cascade, execute the Classes/New ID... command from the main menu.


Custom/Expert Classes

Table of Contents        Balthisar Software Site [image]        Cascade Classes

Custom/Expert classes are a Cascade contrivance designed to provide the stylesheet author the ability to create a class using any valid CSS2 selector. The "ready made" class types provided by Cascade may not meet all of the requirements an advanced stylesheet may have. For example, CSS2 provides for a mixture of two types of contextual classes, as shown here:

DIV OL > LI P {color: red}

The example can only be created as an Expert/Custom class. It combines two types of contextual selectors: descendent selectors (the built-in Cascade contextual selector type), and child selectors. The example gets quite precise as to when the <P> element will be rendered in red. In this case, <P> will use the specified attribute (color) only when it is nested somewhere in a <LI> (list item) tagset, and if that <LI> tag is nested immediately within an <OL> (ordered list) tagset, and if that <OL> tagset is nested somewhere in a <DIV> tagset. So...

<DIV>

<OL>

<TABLE>

<TR>

<TD>

<LI>

<P>Hello, world!

...</DIV>

...does not satisfy the example selector, so "Hello, world!" would be rendered in its default color. The spoiler causing the color attribute not to have an effect is that the <LI> is not an immediate child of an <OL>. However, this HTML...

<DIV>

<OL>

<LI>

<TABLE>

<TR>

<TD>

<P>Hello, world!

...</DIV>

...would render "Hello, world!" in red, because the <LI> is an immediate child of the <OL>. The <P> doesn't have to be an immediate child of the <LI>; it's enough that it's merely a descendent.

Another use of expert selectors is specification of multiple selectors which allow the attributes you set to apply to multiple classes. For example:

H1, H2, H3, H4, H5, H6 {color: red; font-family: Helvetica}

H6 {font-family: Times}

The above setup allows rapid specification of color and font for all <Hx> elements. As an added demonstration, the second line above changes the font family for just <H6>, while still keeping the color red from the first line.

As you can see, using Custom/Expert Selectors gives you tremendous power over your stylesheets. To create a Custom/Expert selector, execute the Classes/Expert Selector... command from the main menu. Also see the W3C's CSS2 Specification Document for all the information you could ever possibly need about the creation of selectors.


@Media Descriptors

Table of Contents        Balthisar Software Site [image]        Cascade Classes

@Media descriptors are "meta" classes implemented by Cascade to allow the use of the @media rule as specified in the CSS2 specification.

@Media descriptors appear in the class list just like any other Cascade class. Like other classes, the descriptor can be dragged around and repositioned to affect top-down cascading order. Unlike other classes, @media descriptors cannot be edited in the attributes panes.


Cascade Overview

Table of Contents        Balthisar Software Site [image]        Cascade Overview

This section briefly highlights the interface to the Cascade application, and its overall operation. It is not meant to serve as a tutorial; please see the printed documentation for that.

The following picture shows the main interface to the application, with red labels to indicate the major portions of the window. The paragraph below the illustrations has the corresponding window portions highlighted in matching red.

•	CSS2 classes are created using the main menu.

•	The selectors for the classes you create are placed into the class list.

•	The attributes for the class selected in the class list are manipulated in the 14 attributes panes.

•	A preview of the CSS2 code for the class selected in the class list is shown in the preview pane, and reflects the attributes' values from the 14 attributes panes.

•	You can work with multiple documents. To switch between open documents, select the document in the documents tabs.

•	Often-used main menu functions are duplicated for quick access in the shortcuts bar.

In addition, to all of the items above, you may want to take a look at some of these interface details:

 Interface elements used in the attributes panes.

 How to use the Preferences window for Cascade.

 How to use the Color Picker window for Cascade.


sa:Overview
Interface Elements

Class List

Class List Contextual Menu

Preview Pane

Preview Pane Contextual Menu

Attributes Panes

The Shortcut Bar

Preferences

Main Menu

Documents Tabs

The HTML Color Picker


Interface Elements

Table of Contents          Balthisar Software Site [image]        Cascade Overview

The following controls are used in the attributes panes to specify the values for the attributes in the classes you design. Most of the controls are standard Windows controls, but some of the controls merit special mention.

Check Boxes are standard Windows controls that allow you to select whether a single option is turned on or off. The example at the left shows two check boxes: the topmost is turned on; the bottommost is turned off.

Radio Buttons are standard Windows controls that allow you to select a single option among many options in a discrete group. The example at the left shows three such buttons, the topmost of which is selected.

Edit Boxes are standard Windows controls that allow you to enter single lines of text. Some of the attribute values in Cascade require you to provide information that is not selectable, and Edit Boxes provide you the ability to provide that information. Note: some attribute values require a great deal of textual information that is not easily displayed in a small Edit Box. Instead, these text items use Combo Editors, shown next.

Combo Editors serve multiple functions, and are not a standard part of the Windows interface. As mentioned above, a Combo Editor can act in place of an Edit Box. You can type short, textual information into them, or, press the ellipsis button, and a larger text-editing area will open allowing you to type in a larger amount of text. This style of Combo Editor is in the top part of the illustration to the left. In addition, Combo Editors are used for attributes which require a color value. In this style of Combo Editor, you cannot enter a value directly. Instead, the ellipsis button activates Cascade's HTML Color Picker. This style of Combo Editor is pictured in the bottom part of the illustration to the left.

Drop-Down Lists are standard Windows controls that allow you to select one option from among many choices. Generally, you are not allowed to type information not present in the list into the Drop-Down List's text-editing area. However, in the case of Font-Family Drop-Down Lists, you can type information directly into the text-editing area, which allows you to specify fonts not present on your own system.

LED Check Boxes are similar to standard Windows Check Boxes, in that they allow you to turn a single option either on or off. In the illustration to the left, the states are shown from left to right as "off" and then "on." In the case of Cascade, any LED Check Box serves to designate a class attribute as being "important" or not. By marking an attribute important, the user's web browser will place more weight on the instructions provided in your style sheets.

A Spin Editor provides you with the means to either type in a number, or to operate the arrows to increase or decrease the number in the editor. In addition, Cascade has added a feature to all of the applicable Spin Editors: right-clicking applicable Spin Editors brings up a contextual menu with the opportunity to toggle whether the Spin Editor is displaying whole numbers (numbers without decimals) or not.

A Pop-Up Menu is a type of control not ordinarily used in Windows, but if you've ever used a Macintosh, you will appreciate their implementation in Cascade. A Pop-Up Menu serves a similar purpose to Drop-Down Lists, although in a more attractive style. The illustration to the left shows how a Pop-Up Menu usually looks. The "name" on the menu reflects the currently selected choice in the menu.

This second illustration demonstrates what a Pop-Up Menu looks like when you have popped it up. It's pretty similiar to standard Windows contextual menus in appearance. All available menu options are shown on the menu, and the currently selected option appears with a checkmark to the left. If you select a new option, the name of the Pop-Up Menu will be replaced to reflect the change.


Spin Editor Contextual Menu

Table of Contents          Balthisar Software Site [image]        Cascade Overview

For spin editors that can show fractional numbers, the contextual menu to the left has been assigned. The purpose is to allow you to toggle the "whole-number" state of the spin editor in question. That way, values that should logically be whole numbers can be entered in a more sensical manner. For example, values that are set in pixels are whole numbers only.


Class List

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The class list consists of a list of classes that your CSS2 stylesheet contains. The class list is the central interface element to the classes in your stylesheet. It shows all of the HTML elements, classes, subclasses, pseudo-elements and -classes, custom "expert" classes, and @media descriptors.  All of the classes in the class list can be rearranged into any order you may wish them to be; doing so affects the cascading order of the CSS2 file. You can rename classes in the class list; you can add new classes to the class list; and you can delete classes from the class list. Right-clicking on the class list brings up a contextual menu with options that apply to the selected class. In addition, several of the menu items in the main menu, as well as some of the shortcuts apply to individual classes selected in the class list.

If a class in the class list is tagged, then it is drawn with bold text. The export and preview functions allow you to apply their features to either all classes, or to tagged classes only. This gives you some flexibility during the design stages of your stylesheet.

You can rearrange the order classes are displayed in the class list. The display order is the CSS2 cascading order. To rearrange the order, simply drag-and-drop the selector you would move.

To copy a class in the current document to another document (or within the same document using this method), drag the selector you would copy, and drop it on the documents tabs' document you wish to copy to.


Tag/Untag Button

Table of Contents	Balthisar Software Site [image]        Cascade Overview

This button can take any of the appearances shown here, depending on whether the currently selected class is tagged or not. The button's purpose is to allow you to change the current "tagged" state of the selected class in the class list. When a class is tagged, the class list shows the class name in bold; otherwise, the class name is not bold.

By tagging some classes, and not others, you are provided some flexibility in your preview and export functions during the development of your stylesheets.

Note: @media descriptors cannot be untagged.

An alternative to using this button to change the tagged state of a class is to use the contextual menu, or the main menu.


Class List Contextual Menu

Table of Contents          Balthisar Software Site [image]        Cascade Overview

The illustration to the left shows the contextual menu that appears when you right-click the class list. Click one of the menu options in the illustration for a description of the function that would be performed. Note: generally, not all items in the menu will be enabled; some will be disabled if the feature is not available.


cm:Tag/Untag
Tag/Untag: This menu option changes allows you to change the current "tagged" state of the selected class in the class list. When a class is tagged, the class list shows the class name in bold; otherwise, the class name is not bold.

By tagging some classes, and not others, you are provided some flexibility in your preview and export functions during the development of your stylesheets.

Note: @media descriptors cannot be untagged.

An alternative to using this button to change the tagged state of a class is to use the Tag/Untag Button, or the main menu


cm:Subclass
Subclass...: This menu option changes allows you to create a subclass of the currently selected class.


cm:ContextClass
Contextual Class...: This menu option allows you to create a descent-type contextual class using the selected class as the selector's ancestor.


cm:PseudoClass
Pseudoclass...: This menu option changes allows you to create a pseudo-class of the currently selected class.


cm:Cut
Cut: This menu option removes the currently selected class from the class list, and puts its contents onto the system clipboard. You can then paste this data back into any Cascade document. When you cut, the textual CSS2 code is also placed on the system clipboard, so you can paste the text into any document you wish.


cm:Copy
Copy: This menu option copies the contents of the currently selected class into the system clipboard. You can then paste this data back into any Cascade document. When you copy, the textual CSS2 code is also placed on the system clipboard, so you can paste the text into any document you wish.


cm:PasteOver
Paste Over: This menu option pastes the attributes and their values from any class you have previously cut or copied into the currently selected class, replacing the attributes and selectors of the class. The pasted data still remains on the clipboard, allowing you to paste multiple times.


cm:Delete
Delete: This menu option removes the currently selected class from the class list, without putting its contents onto the system clipboard.


cm:Rename
Rename: This menu option allows you to safely rename the currently selected class. "Safely rename" means that the renaming dialogue box will consider the type of class the selector represents, and allow you to rename only the appropriate part.

By holding down the Control key as you pop-up the contextual menu, the "Rename" option becomes "Expert Rename." You can then rename the entire selector, but the renamed class will then be processed by Cascade as a Custom/Expert class.


Preview Pane

Table of Contents	         Balthisar Software Site [image]        Cascade Overview

The preview pane allows you to take a look at the CSS2 text your stylesheet is generating. Normally, the preview pane will show only the class with which you are currently working, but you can choose to view all classes or all tagged classes (as shown to the left) by using the pop-up menu beneath the preview pane, or using the preview pane's contextual menu. If you choose the alternate views, the preview pane will revert back to displaying only the text of the currently selected class. If you want to copy text from the preview pane (for example, to paste it into an HTML document), you can do so by right-clicking in the preview pane, and using the contextual menu.


Preview Pane Contextual Menu

Table of Contents          Balthisar Software Site [image]        Cascade Overview

The illustration to the left shows the contextual menu that appears when you right-click the preview pane. Click one of the menu options in the illustration for a description of the function that would be performed. Note: generally, not all items in the menu will be enabled; some will be disabled if the feature is not available.


cm:PrevAll
Preview All Classes: This menu option changes the preview pane so that the CSS2 code for all classes in the class list is displayed.


cm:PrevTagged
Preview Tagged Classes: This menu option changes the preview pane so that the CSS2 code for only tagged classes in the class list is displayed.


cm:PrevSingle
Preview Single Class: This menu option changes the preview pane so that the CSS2 code for only the currently selected class in the class list is displayed. Note: it is generally not necessary to select this menu item, since for most actions you perform, the preview pane will automatically revert to this state.


cm:CopySelected
Copy Selected Text: This menu option copies the selected text in the preview pane onto the system clipboard, where you can paste the text into other applications. Note: it is normal for Windows to replace the contents already on the clipboard with any new data you copy. Therefore, if you've copied or cut classes from the class list, that information will be replaced. Instead of copying text from the preview pane to obtain CSS2 code, it is recommended that you copy the class you are interested in from the class list. This will put the textual CSS2 code into the clipboard as well. Alternatively, you can use one of Cascade's export functions.


cm:CopyAll
Copy All Preview Text: This menu option copies all of the text in the preview pane onto the system clipboard, where you can paste the text into other applications. Note: it is normal for Windows to replace the contents already on the clipboard with any new data you copy. Therefore, if you've copied or cut classes from the class list, that information will be replaced. Instead of copying text from the preview pane to obtain CSS2 code, it is recommended that you copy the class you are interested in from the class list. This will put the textual CSS2 code into the clipboard as well. Alternatively, you can use one of Cascade's export functions.


Attributes Panes

Table of Contents	Balthisar Software Site [image]        Cascade Overview

These pages contain all of the possible attributes to which you can assign values for a class in a CSS2 document. The pages are split into logical groups based on the functions the attributes perform in styling a CSS2 class.

For a description of the individual pages, which include links to the individual attributes, follow any of the links in the image above.

Note: "Aural Characteristiks" and "Aural Settingz" are intentionally spelled wrong in order to provide the necessary shortcut keys to make switching panes easier.


Shortcut Bar

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The shortcut bar provides one-click access to some of the more common functions found in the main menu.

The shortcut bar can be dragged from its position at the top of the main window, and placed anywhere on any of your monitors. It can also be snapped back by dragging it back over the main window.

If you hover the mouse over the shortcut bar icons, a hint window will tell you the purpose of the shortcut. Additionally, the following items show you the meaning of the shortcut bar icons.

Creates a new Cascade document.

Opens an existing Cascade document.

Saves the current Cascade document.

Cuts the currently selected class from the class list, and puts it on the Windows clipboard.

Copies the currently selected class in the class list onto the Windows clipboard.

Pastes the current clipboard selection to the document as a new class.

Deletes the currently selected class from the class list without putting it onto the Windows clipboard.

Previews the current document in the default web browser with the HTML document of your choice.

Drops a short menu with options to allow the export of the current Cascade document. Choices are all classes, tagged classes, and selected class.

Applies the name of any CSS file to any HTML documents of your choice.

Puts the system cursor into context-sensitive-help-mode, which allows you to click on an item to get help about it. To get context help for menu items, hover the cursor over the menu item, and press Ctrl-F1.


Preferences

Table of Contents	Balthisar Software Site [image]        Cascade Overview

Preferences allow you to customize some of the aspects of how Cascade operates. The preferences panel is also the means to identify the author of Cascade documents and the stylesheets it generates. The following illustrations show both pages of the preferences panel, and below them, the options are illustrated and explained.

Preferences Page 1

Page one of the preferences panel displays the preferences proper. The items in this panel function as follows:

 Determines whether or not the Font-Family drop-down lists display the currently selected font in their own typeface.

 Determines whether or not the combo editors for color values display the currently chosen color. If not, only the name or hexadecimal value of the color is display (in any case, system colors will never be displayed in thier own color).

 Determines whether or not the HTML Color Picker will allow you the option of selecting system colors.

 Determines whether or not Cascade confirms that you really want to cut or delete the currently selected class in the class list.

 Cascade would normally use double-quotes when exporting attributes (e.g., "Times New Roman). Sometimes this conflicts with existing HTML, particularly if you are placing CSS inline. Checking this option tells Cascade to use single-quotes when exporting attributes (e.g., 'Times New Roman').

 Determines whether or not Cascade allows you to insert more than one selector with the same name. Older versions of Cascade would try to "protect" the user from doing this, but with the introduction of @media types, such "protection" is no longer desireable all of the time. Besides, allowing multiple instances of the same selector provides other flexibilities in a CSS2 stylesheet.

 Specifies the default Author Name, Author Email, and Author URL for new Cascade documents. This information will be included in any Cascade documents you create.

 Allows you to specify the default drive and path where Cascade first attempts to open or save documents. After the initial open or save operation, Cascade will use the last folder you accessed until the next time you start the application (in which case, the default is used again initially).

Preferences Page 2

Page two of the preferences panel displays the current document information, including the original author's name, email address, and URL if he specified them. Also shown is the name of the last application which saved the document, as well as any document special features. This last item is reserved for future expansion of the CSS2 file format.

The following illustration shows the "Apply Identity" button that is on page two of the preferences, and it is described below.

 Cascade normally leaves the original author's information in the document as a constant reminder of the document origin. However, if you make significant changes to a document, or need to change the name, email address, or URL of your own documents, then this button will "steal" the information from the default author items on page one of the preferences, and apply it to the current document. Voila! You are now the original author of the document.


The Main Menu
Main Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The main menu is the central means to manipulating classes which appear in the class list, as well as to manipulating entire documents.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.


File Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The file menu provides the means necessary to manipulate an entire document.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.

Note: not all menu options will be available at all times.


mm:File/New
New...: This menu command will create a new, untitled document. If the file called "default.wwtd" (a stationary, or template, document) exists in the same directory as the Cascade application, then the new document will be based on that stationary.

Note: if "default.wwtd" does exist, and you want a blank document instead of a new one based on the stationary, then don't use the New menu command. Instead, type Ctrl-N to create a new document, which forces Cascade to ignore the default stationary.


mm:File/Open
Open...: This menu command will present you with a standard file-open dialogue, so that you can open an existing Casacade document.


mm:File/Save
Save: This menu command saves the current document. If the document already has a name, then that name will be used. If the document does not have a name, or has never been saved, you will be presented with the file save-as dialogue.


mm:File/SaveAs
Save As...: This menu command will present to you the file save-as dialogue, so that you can save the current document using any legal name you wish.


mm:File/Close
Close: This menu command closes the current document. If any changes have been made to the document since it was opened or last saved, you will be asked whether you wish to save the file or not.


mm:File/Export-Tagged
Export Tagged Classes...: This menu command allows you to export your Cascade documents as CSS code or HTML code. Alone, a Cascade document is useless -- it must be exported for use on the internet. Choosing this command will present to you a file save-as dialogue, where you can choose the file format as being HTML Format or CSS Format, as well as provide a name for the file. Cascade will next translate the classes in the class list which are tagged into the appropriate format, and create the file you asked for.


mm:File/Export-All
Export All Classes...: This menu command allows you to export your Cascade documents as CSS code or HTML code. Alone, a Cascade document is useless -- it must be exported for use on the internet. Choosing this command will present to you a file save-as dialogue, where you can choose the file format as being HTML Format or CSS Format, as well as provide a name for the file. Cascade will next translate the all of the classes in the class list into the appropriate format, and create the file you asked for.


mm:File/Export-Selected
Export Selected Class...: This menu command allows you to export your Cascade documents as CSS code or HTML code. Alone, a Cascade document is useless -- it must be exported for use on the internet. Choosing this command will present to you a file save-as dialogue, where you can choose the file format as being HTML Format or CSS Format, as well as provide a name for the file. Cascade will next translate the currently selected class in the class list into the appropriate format, and create the file you asked for.


mm:File/Preview
Preview in Browser...: This menu command allows you to see what your stylesheet looks like when applied to the HTML file of your choice. Your HTML file must use the classes you create. For example, if your Cascade document has an Element Class <P>, then chances are your HTML file already uses it. But if your document has a class called P.green, it will not show up in your HTML file, unless the HTML tries to use <P.green> somewhere. Cascade create temporary files for this work, so none of your original files will be touched. Cascade tries to insert the proper <LINK> tag into the HTML file, so that the HTML will load the stylesheet in the browser. Please read this warning.

The preview will occur in whichever application is registered on your system as handling HTML files (i.e., your default web browser).


mm:File/Exit
Exit: This menu command quits the Cascade application. If any documents are open that have had changes made to them since they were last saved, you will be asked whether you would like the documents saved or not.


Edit Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The Edit menu provides the means necessary to manipulate already existing classes in the class window.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.

Note: not all menu options will be available at all times.


mm:Edit/Cut
Cut: This menu option removes the currently selected class from the class list, and puts its contents onto the system clipboard. You can then paste this data back into any Cascade document. When you cut, the textual CSS2 code is also placed on the system clipboard, so you can paste the text into any document you wish.


mm:Edit/Copy
Copy: This menu option copies the contents of the currently selected class into the system clipboard. You can then paste this data back into any Cascade document. When you copy, the textual CSS2 code is also placed on the system clipboard, so you can paste the text into any document you wish.


mm:Edit/Paste
Paste: This menu option pastes a new class and its attributes into the document. It is only available if you have previously cut or copied a class from the class list. The pasted data still remains on the clipboard, allowing you to paste multiple times. If the selector of the class on the clipboard does not already exist in the current document, then the new class will have the selector; otherwise, you will be asked to provide a new selector for the class, and the class will be a Custom/Expert class.


mm:Edit/Delete
Delete: This menu option removes the currently selected class from the class list, without putting its contents onto the system clipboard.


mm:Edit/Rename
Rename...: This menu option allows you to safely rename the currently selected class. "Safely rename" means that the renaming dialogue box will consider the type of class the selector represents, and allow you to rename only the appropriate part.

If you want to rename the class to another type of class, you will have to use the Expert Rename feature of the class list's contextual menu.


mm:Edit/Preferences
Preferences...: This menu option opens the preferences panel.


View Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The View menu provides the means necessary to show or hide the Shortcut bar, and to Detach or Attach the class list and preview panes.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.


mm:View/Shortcuts
Shortcut Bar: This menu option allows you hide or show the shortcut bar. The hidden/not-hidden condition is stored as a program preference, and will be in the same condition next time Cascade is run. NOTE: if you detach the Shortcut Bar, then next time Cascade runs, the Shortcut Bar will be reattached.


mm:View/Detach Classes
Detach Class List: This menu option allows you to detach the Class List from the main window, so that it can be positioned anywhere on the screen. You can also perform this operation by double-clicking the faux title bar while the Class List is attached. If the list is already detached, then this option re-attaches the Class List to the left side of the main window.


mm:View/Detach Code
Detach Code Preview: This menu option allows you to detach the Code Preview Pane from the main window, so that it can be positioned anywhere on the screen. You can also perform this operation by double-clicking the faux title bar while the Code Preview Pane is attached. If the pane is already detached, then this option re-attaches the Code Preview Pane to the right side of the main window.


Classes Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The Classes menu provides the means necessary to create new classes.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.

Note: not all menu options will be available at all times.


mm:Classes/ExpertSelector
Expert Selector...: This menu option allows you to create a new Custom/Expert class.


mm:Classes/NewElement
New Element...: This menu option allows you to create a new Element class.


mm:Classes/NewClass
New Class...: This menu option allows you to create a new class.


mm:Classes/NewID
New ID...: This menu option allows you to create a new ID class.


mm:Classes/ContextualClass
Contextual Class...: This menu option allows you to create a new descendent contextual class, based on the currently selected class in the class list as the ancestor class.


mm:Classes/Subclass
Subclass...: This menu option allows you to create a new Subclass, based on the currently selected class in the class list.


mm:Classes/Pseudo
Pseudoclass...: This menu option allows you to create a new Pseudo-class or Pseudo-class of a subclass, based on the currently selected class in the class list.


mm:Classes/TagUntag
Tag/Untag: This menu option allows you to change the tagged/untagged state of the currently selected class in the class list. It functions exactly the same as the Tag/Untag button.


mm:Classes/InsertMedia
Insert Media Type...: This menu option allows you to insert an @media descriptor into the class list. Choosing this option will open a dialog which allows you to select one or more media types which the descriptor should apply to.


Tools Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The Tools menu provides miscelleneous functions.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.

Note: not all menu options will be available at all times.


mm:Tools/Apply
Apply Stylesheet to HTML File(s): This menu option will attempt to make any HTML files you specify compatable with the stylesheets you design and export from Cascade. You will first be asked to select all of the HTML files you would like to be made compatable. You can select as many files in the same folder as you like at one time, but bear in mind that you will apply the same stylesheet to all of them. Run this tool multiple times if you need to apply different stylesheets to different files. After selecting files, you will be asked to specify the name of the stylesheet you would like to apply. This is the name of the CSS file as it will exist on the server or locally on your system, including any necessary path information. When you have specified the CSS file, Cascade will then modify your HTML files by inserting a <LINK> tag into the <HEAD> section of each HTML file. Please read this warning.


mm:Tools/Install
Install External Tool: This menu option is used to install external tools which have been specially written to work with Cascade to provide added features. These tools may or may not originate from Balthisar Software. NOTE: this feature is still forthcoming!


Apply/Preview Warning
Warning: During this process, Cascade will also remove any element which contains the value "text/css" anywhere in the tag, e.g., <STYLE TYPE="text/css">. This can lead to problems if you have that value in any HTML tags. In the just cited example, the <STYLE> tag would be removed, but not the corresponding </STYLE> terminator, nor the content of the tagset. If you know this will affect your HTML files, then don't use this feature. Instead, modify your HTML files manually.


Help Menu

Table of Contents	Balthisar Software Site [image]        Cascade Overview

The Help menu provides the means necessary to obtain help and program information.

To see the commands in any of the menus, as well as a description of what those commands do, click the menu of interest in the illustrated menu bar.

Note: not all menu options will be available at all times.


mm:Help/Help
Help Contents and Index...: This menu command starts this help file. To get contextual help, use the Help icon on the Shortcut bar. For contextual help with menus, hover the mouse over the menu item in question, and press Ctrl-F1.


mm:Help/About
About Balthisar Cascade...: This menu option shows the current version of Balthisar Cascade, and provides a link to check to see if it is the most recent version.


Documents Tabs

Table of Contents          Balthisar Software Site [image]        Cascade Overview

This section merely shows you what the documents tabs are, as well as to tell you about a special feature related to drag-and-drop and the documents tabs.

These tabs are used to switch between open documents, if you have more than one document open. Because each document is cached to disk in multiple-document situations, documents with a larger number of elements will take longer to switch back-and-forth between. This is normal behavior, and no cause for alarm.

An added feature of the documents tabs is the ability to copy classes from one document to another through drag-and-drop. All you have to do is start dragging the class you wish to duplicate from the class list. Then, drop the class on top of the document tab you wish to copy the class to. You can even copy classes within the same document by dropping the class on its own document's tab!

If the selector of the dropped class does not already exist in the destination document, then the new class will be an exact copy of the original. If the selector already exists, Cascade may ask you to type the new selector, which will make the new class a Custom/Expert class(see Preferences to determine whether you will be asked to rename the class).


HTML Color Picker

Table of Contents          Balthisar Software Site [image]        Cascade Overview

This section explains how to use the HTML Color Picker, which is invoked any time you press the ellipsis button of a Combo Editor designated for colors.

The HTML Color Picker used by Cascade gives you many choices, and has the following features:

•	The ability to use CSS2's new color names to specify system colors, which will render in the appropriate color on different users' operating systems.

•	The standard ability to mix RGB colors and specify them in hexidecimal format.

•	The ability to select HTML 3.2+ color names from hue-oriented lists.

•	A custom colors palette that remembers your custom colors forever.

•	Auto-pane-switching in custom color implementation.

The color picker is divided into two primary panes, which operate completely differently, depending upon whether or not you want an HTML color or a System color. The illustration of the color picker main tabs, below, has links which will take you to an explanation of either pane the tabs control.


HTML Colors
HTML Color Picker - HTML Colors

Table of Contents         Balthisar Software Site

The HTML Color Picker is divided into two separate, primary panes because depending on the type of color you wish to choose, there are different requirements. The section explains the standard picker for HTML colors, illustrated below.

The color picker is composed of two main parts: the composite, or "Current Color" portion on the right, and the color picker portion on the left, which is divided into three panes which allow you to pick colors differently.

The composite, or "current color" portion is used to show you the current color you have chosen, and is the color that will serve as the value of the attributes whose color you are modifying. Above the color is the RGB value of the color depicted. Below the color is the HTML color name, if there is one, of the chosen color.

The composite color is draggable, which allows you to add the composite color to your custom colors. To add the composite color to the custom colors pane, simply drag the composite color to the color picker portion of the screen. If necessary, Cascade will automatically turn the page for you until you drop the color, and automatically switch back to the page you were viewing beforehand. This makes it quick-and-easy to add colors to the custom colors pane.

To determine the functions of the individual picker panes, click on the tabs in the image above.


cp:RBG
RGB Picker

Table of Contents          Balthisar Software Site

The RGB color picker lets you create your own colors my mixing the different intensities of the three transmitted primary colors red, green, and blue (hence the acronym RGB).

Each of the three primary colors is represented by a horizontal slider. As the position of the slider nears the leftmost of its range, the color darkens; as the position nears the rightmost of its range, the color lightens. You can position the thumb of the slider by dragging it, or, if you wish, by nudging with the arrow buttons on either end of the slider. Because each slider has 256 possible positions, you can conceivably mix  16 777 216 colors!

As you mix the colors, the composite color will actively change as you move the sliders' positions. This ensures that you always see a live display of the color.

If the color you mix just happens to match that of a named HTML color, its name will appear beneath the composite color box.

If you manage to drag the composite color over the RGB picker, the RGB picker will temporarily disappear to show the custom color picker, so that you can drop the color there. Once you are done with the drag-and-drop, the RGB picker will reappear.


cp:Name
Name Picker

Table of Contents          Balthisar Software Site

The name color picker lets you select a human-readable color by name, as defined in the W3C's HTML specification.

To ease your choice of color selections, the name picker has the available colors separated into groups by hue. To select a named color, first use the radio buttons to select a color group, then use the drop-down list select the color you desire. After doing so, the composite color will update to show you what the color looks like.

If you manage to drag the composite color over the name picker, the name picker will temporarily disappear to show the custom color picker, so that you can drop the color there. Once you are done with the drag-and-drop, the name picker will reappear.


cp:Custom
Custom Color Picker

Table of Contents          Balthisar Software Site

The custom color picker allows you to create a customized palette of your favorite or often-used colors. These colors, once on the palette, should be there again and again every time you use Cascade. Note: if you spend any time setting up your custom colors, ensure that you exit the color picker by choosing Okay, and not Cancel.

As the illustration shows, any time you hover the mouse over one of the custom colors, its name, if it has one, will be shown in a hint window. If the color has no matching name, the RGB value will be displayed instead.

To place the color of your choice into the custom colors grid, use either the RGB picker or the name picker to put the color of your choice into the composite color cell. Then, merely drag the composite color onto the custom color grid. You can drop the color on an empty cell, or drop it on an existing custom color to replace that color.

If you manage to drag the composite color over any of the other two color pickers, the other color picker will temporarily disappear to show the custom color picker, so that you can drop the color there. Once you are done with the drag-and-drop, the other color picker will reappear.


System Colors

HTML Color Picker - System Colors

Table of Contents         Balthisar Software Site

The HTML Color Picker is divided into two separate, primary panes because depending on the type of color you wish to choose, there are different requirements. The section explains the picker for System color names, illustrated below.

The color picker is composed of two main parts: the composite, or "Current Color" portion on the right, and the available colors list on the left.

As you select colors on the left, a description of the color name appears near the middle of the dialog, and the composite color updates to show you the current color as it appears on your own system.

Because system colors can and do vary from system to system, as well as from platform to platform, ensure that you use them wisely. Their purpose it intended to elegantly integrate portions of your content with the users' own operating systems.


Cascade Tips, Tricks, and Shortcuts

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

This section is intended to show you some of the less obvious features of the Cascade application, and has been divided into the following areas:

 Whole Numbers and Spin Editors

 Setting Default Measurements

 Cutting, Copying, and Pasting

 Drag-and-Drop

 Document Templates

 default.WWTD

 Variations on Creating New Documents

 Variations on Renaming Classes


sa:Tips
Whole Numbers and Spin Editors

Default Measurements

Cutting, Copying, and Pasting

Drag-and-Drop

Document Templates

default.wwtd

Variations on creating new documents

Variations on renaming classes


Whole Numbers and Spin Editors

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

Some the spin editors accept fractional information to accomodate certain units of measurement such as inches. However, if the unit of measurement you want to use a inherently non-fractional, such a pixels, it's a better idea not to display the fractional portion of the number value.

In spin editors such as these, you can right-click the spin editor to show the contextual menu illustrated below.

 The purpose of the "whole numbers" option is to allow you to toggle the "whole-number" state of the spin editor in question. That way, values that should logically be whole numbers can be entered in a more sensical manner.


Setting Default Measurements

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

Most of the attributes which utilitze units of measurement allow you to select the unit of measurement to use, such as the one pictured to the left. All such selectable units of measurement have a command in their pop-up menu called Make Default. If you choose this command, then unit of measurement you have selected will be the new default unit of measurement at all times in the future, for that particular attribute.


Cutting, Copying, and Pasting

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

In the class list, you can cut, copy, and paste classes.

Whenever you cut or copy a class in the class list, the class is copied onto the Windows clipboard, where Cascade and other applications can use the data that is present there. Whenever you cut or copy, any information already present on the clipboard is replaced.

Furthermore, Cascade places the data onto the clipboard in two formats: text format and Cascade format. This means, after copying or cutting a class in the class list, you can switch to another application, and paste the class's CSS text. You can also paste the class into the class list.

When you cut a class, in addition to the items mentioned above, the class is removed from the class list, and hence, your document.

When you paste a class in Cascade, the application checks to see if the selector already exists. If not, the class is pasted immediately. If the selector already exists in the current document's class list, you are asked to supply a new selector for the class; the class will then be pasted as a Custom/Expert class.

When you paste over a class in Cascade, you apply the settings of the class in the clipboard to the currently selected class in the class window, replacing any attributes' values you may have set.


Drag-and-Drop

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

Cascade lets you use drag-and-drop to accomplish two different things:

•	Set cascading order in the class list.

•	Copy classes from one document to another.

In the class list, cascading order is determined by the order the selectors appear from top to bottom. To rearrange the class list, simply grab the selector you would move, drag it to the area of the list you want it to appear, and drop it there. The list will be rearranged to submit to your will.

To make a duplicate of a class in the class list, you can use drag-and-drop. In the source document, simply grab the class you would duplicate, and drag it to the document tab of the destination document. The source document and the destination document can be the same document, which results in duplicating the class in the same document.

If the selector does not exist in the destination document, the dropped class will be inserted automatically. If the selector does exist, Cascade will ask you for a new selector, and the class will be inserted as a Custom/Expert class.


Document Templates

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

Cascade currently has limited support for stationary documents, also known as templates. Cascade stationary files are identical to Cascade documents, with the exception of the file extension. Stationary files use the extension .WWTD instead of .WWS2.

When you save your file, you can use the save-as dialogue to change the file extension so that the document will saved as a stationary file.

Whenever stationary files are opened in Cascade, you will be able to alter the stationary file.

Whenever stationary files are opened from the shell (i.e., they are double-clicked to start), they will open as new, untitled documents (e.g., "Document 1"; "Document 2").


default.WWTD

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

If you have a stationary file that resides in the same directory as the Cascade application, and it is named "default.WWTD" then in most cases, Cascade will create new documents based on that file instead of creating empty documents.

If the above conditions are met, and you use the File/New... command in the main menu, or use the new file shortcut, the new document will be based on "default.WWTD."

If you use the Ctrl-N keypress, then Cascade will create the new document with no classes at all (i.e., it will ignore the presense of "default.WWTD").


Variations on Creating New Documents

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

When you use the File/New... command in the main menu, or use the new file shortcut, the new document will be created based on "default.WWTD" if it is present in the same directory as the Cascade executable.

If you use the Ctrl-N keypress, then Cascade will create the new document with no classes at all (i.e., it will ignore the presense of "default.WWTD").


Variations on Renaming Classes

Table of Contents          Balthisar Software Site [image]        Cascade Tips...

Normally, when you use the Rename... command in the main menu or the class-list contextual menu, you are limited to specifying the new selector based on the type of class you have selected in the class list. This is done to help coach inexperienced users, and generate legal CSS2 code.

However, if you control-right-click (i.e., hold down Ctrl as you right-click) on the class list to activate its contextual menu, the Rename... command becomes Expert Rename...


Practical Use of Balthisar Cascade

Table of Contents          Balthisar Software Site [image]        Practical Use

This section demonstrates some the essential practical knowledge you need in order to successfully use the Cascade application. These topics are listed below.

 Cascade file types

 Creating a new document

 Saving a document

 Opening a document

 Creating a default set of elements

 Including CSS2 in HTML


sa:PracticalUse
Cascade file types

Creating a new document

Saving a document

Opening a document

Creating a default set of elements

Including CSS2 in HTML


Cascade File Types

Table of Contents          Balthisar Software Site [image]        Practical Use

The following files are employed by the Cascade application. In some cases, your shell windows may be configured to hide extensions.

Extension	File Type	Description

.WWS2	Cascade Document	Balthisar Cascade document

.WWTD	Cascade Stationary	Templates for use with Cascade

.WWST	Cascade Swapfile	Tempory file only. Will be erased.

.CSS	Cascading Style Sheet(1)	Text file containing CSS code.

.HTML	HTML File(2)	Text file containing HTML Markup.

Footnotes:

(1) Cascade does not change the file type description when it is installed, so it may appear differently on your system.

(2) ibid


Creating a New Document

Table of Contents          Balthisar Software Site [image]        Practical Use

A new document is automatically set up and ready to go for you as soon as you start Cascade, unless you started the application by opening a document. There are also three other ways you can start a new document.

•	From the main menu, select the File/New... command. Cascade will create a new document. If the file "default.WWTD"exists in the same folder as the application, then the new document will be based on that stationary.

•	Using the shortcut bar, select the icon for new document. If the file "default.WWTD"exists in the same folder as the application, then the new document will be based on that stationary.

•	Press the Ctrl-N key combination. Cascade will create a new, blank document.

Once you've created a new document, you will probably need to create classes to modify. Browse through the Cascade Overview section for details.


Saving a Document

Table of Contents          Balthisar Software Site [image]        Practical Use

When you have created your stylesheet, it's usually a good idea to save it to the hard drive in case you need to make changes later. To save a file, use the main menu to select either the File/Save or the File/Save As... command.

If you choose File/Save As..., or File/Save, and the file hasn't been saved yet, you will be presented with the following dialogue box.

At this point, you can choose to save the file as a Cascade document, as a Stationary document, as a CSS file, or as an HTML file. The latter two options export your document for use with your HTML files.


Opening a Document

Table of Contents          Balthisar Software Site [image]        Practical Use

When you've saved a Cascade document, you'll eventually want to re-open it.  To open a file, use the main menu to select the File/Open command. You will be presented with the following dialogue box.

At this point, you can choose to open a Cascade document, or a Stationary document.


Creating a Default Set of Elements

Table of Contents          Balthisar Software Site [image]        Practical Use

If you constantly create stylesheets with many of the same classes, it may be a good idea for you to create a startup set, using stationary. To do so, just create your default stylesheet as you would any stylesheet, but when you save it, be sure to selected "Cascade Stationary" as the file type, and name the file "default" -- resulting in a file called "default.WWTD" on your hard drive. For this to work as a default set of classes, the file must reside in the same directory as the Cascade application.


Including CSS in HTML

Table of Contents          Balthisar Software Site [image]        Practical Use

Balthisar Cascade can automatically change any HTML documents that you select so that they will work with your cascading style sheets. This functionality is achieved using the Tools/Apply Stylesheet to HTML File(s)... command on the main menu.

However, this Cascade feature may fail under certain circumstances, or, you may choose not to use the feature. Therefore, this section explains how you can alter your HTML documents manually.

The CSS2 specification and HTML 3.2+ are very liberal in how the HTML author can use a cascading stylesheet.

There are two varieties of using style sheets in an HTML document, with four distinct methods. The variety you wish to use will determine how you should export your Cascade document (note: a Cascade project file, a file with a .WWS2 extension, is only useful for Balthisar Cascade and other applications which support the file format. For use in HTML documents, it is necessary to use one of Cascade's export functions).

The simplest and perhaps most useful variety of using your stylesheets involves linking to an external file which contains your stylesheet rules. This file is generated by Cascade when you select CSS as your filetype when exporting your Cascade project. This provides the benefit of requiring less stylesheet information if all of your pages are using a similar look-and-feel. It also eliminates editing individual HTML documents, if all of your style information is in a single file. Two methods exist to accomplish this external linking.

One Method:

<STYLE TYPE="text/css">

<!--

@import url(url-to-your-file.css)

-->

</STYLE>

An additional benefit of the above method is that you can define or override rules from the imported stylesheet within the same <STYLE> tagset. The user agent treats the imported style information as if it were included in the HTML document.

Alternatively:

<LINK REL=STYLESHEET TYPE="text/css"   HREF="your-url" TITLE="any">

If you don't intend to override rules in the imported stylesheet, the above method is supurb. This is the method Cascade uses if you instruct it to apply stylesheets to your HTML documents.

The second variety of including style information into your HTML document is to simply embed it into your HTML source code. This saves the user agent from having to open a separate connection to the server in order to get style information. On the down-side, if you have a look-and-feel which is consistant across all of your pages, a change to a class will involve editing many files.

This variety is probably best suited for defining classes which appear in only one HTML document.

By selecting HTML as your filetype, you can simply use your editor's import function, or copy and paste the file into your HTML document.

One Method:

<STYLE>

<!--

A {

font-family: "Times New Roman";  {etc}

   }

-->

</STYLE>

The <!-- and --> tags within the <STYLE> elements serve as comments, so that user agents not able parse <STYLE> tags will not display your style sheet rules as on-screen text.

Alternatively:

<P STYLE="color:yellow; font-family:Chicago">

This is an HTML Paragraph

</P>

The above method is suited for instances in which you desire a particular style for a single instant only. Frequent use of the above method makes HTML documents difficult to read and modify.


Contacting Balthisar Software

Table of Contents          Balthisar Software Site

Balthisar Software can be reached on the Wold Wide Web at:

http://www.balthisar.com

Email can be sent to:

balthisar@balthisar.com

NOTICE: the mail-server is experimenting with anti-spam software to prevent unsolicited commercial email from flooding our mailbox, and other customers'. It is possible, especially for certain highly-fraudulent domains, that your email to me will be returned to you marked as "refused." If this is the case, please use the online feedback form located at http://www.balthisar.com/html/feedback.html to contact us. We apologize for any inconvenience this may cause. Please visit the Coalition Against Unsolicited Commercial Email to see how you can help fight spam!


CSS2 Attributes in Detail

Table of Contents          Balthisar Software Site [image]        Attributes Panes

This next section explains all of the attributes which are programmable in CSS2 and in Cascade. It is not intended to be a replacement of the CSS2 Specification from W3C, but rather to serve as a quick reference to the CSS attributes.

This section is divided up according to the Cascade attributes panes, listed below.

Font Attributes Pane

Text Attributes Pane

Alignment Attributes Pane

Margin Attributes Pane

Borders Attributes Pane

Color/Background Attributes Pane

Rendering Attributes Pane

Box Dimensions Attributes Pane

Generated Content Attributes Pane

Lists Attributes Pane

Tables Attributes Pane

Miscellaneous Attributes Pane

Aural Settings Attributes Pane

Aural Characteristics Attributes Pane

Note that in most of the CSS attributes, the value can be set to Inherit. For simplicity and space, this value will not be mentioned in any of the attributes' descriptions. Setting an attribute's value to inherit means that the class will inherit the settings from its ancestor class, if applicable.


sa:Panes
Font Attributes Pane

Text Attributes Pane

Alignment Attributes Pane

Margin Attributes Pane

Borders Attributes Pane

Color/Background Attributes Pane

Rendering Attributes Pane

Box Dimensions Attributes Pane

Generated Content Attributes Pane

Lists Attributes Pane

Tables Attributes Pane

Miscellaneous Attributes Pane

Aural Settings Attributes Pane

Aural Characteristics Attributes Pane


Font Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Font Attributes Pane contains attributes you may specify which affect the fonts in your classes.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:FontAttributes
Font-Family

Font-Size

Font-Size-Adjust

Font-Weight

Font-Variant

Font-Style

Font-Stretch

Font


Font-Family

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The font-family attribute specificies which font family is to be used to render the text. This property specifies a prioritized list of font family names and/or generic family names. To deal with the problem that a single font may not contain glyphs to display all the characters in a document, or that not all fonts are available on all systems, this property allows authors to specify a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. This list is called a font set.

To specify the font set in Cascade, you use the provided drop-down lists. The first two lists allow you to either select a font that exists on your system, or to type in the name of any font you wish to designate. The third list allows you to select a generic-family name, if you wish to do so.


Font-Size

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The font-size property describes the size of the font when set solid. Cascade allows the follow types of size specifications, as shown in the image to the left. These are:

Absolute Sizes, selected with a pop-up menu, are known to the user agent. Possible values are:

xx-small	x-small	small

medium	large	x-large

xx-large

Relative Sizes, selected with a pop-up menu, are interpreted by the user agent and scaled in relation to the size of the parent element. Possible values are:

larger	smaller

Length Sizes and Percentage Sizes are both selected using the Spin Editor and its associated po-up menu.

Length Sizes specify an absolute font size.

Perecentage Sizes specify an absolute font size relative to the parent element's font size. Use of percentage values, or  values in em's, leads to more robust and cascadable style sheets.


Font-Size-Adjust

Table of Contents          Balthisar Software Site [image]        Attributes Panes

In bicameral scripts (having two cases, as with Latin script), the subjective apparent size and legibility of a font are less dependent on their font-size value than on the value of their x-height, or, more usefully, on the ratio of these two values, called the aspect value (font size divided by x-height). The higher the aspect value, the more likely it is that a font at smaller sizes will be legible. Inversely, faces with a lower aspect value will become illegible more rapidly below a given threshold size than faces with a higher aspect value. Straightforward font substitution that relies on font size alone may lead to illegible characters.

Therefore, if you run into such an occasion, the use of the font-size-adjust attribute can be used to increase this ratio.


Font-Weight

Table of Contents          Balthisar Software Site [image]        Attributes Panes

Font weight refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.The font-weight property specifies the weight of the font in your stylesheet. Values have the following meanings:

100 to 900

These values form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor.

normal

Same as 400.

bold

Same as 700.

bolder

Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was 900, in which case the resulting weight is also 900.

lighter

Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was 100, in which case the resulting weight is also 100.


Font-Variant

Table of Contents          Balthisar Software Site [image]        Attributes Panes

In a small-caps font, the glyphs for lowercase letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions. The font-variant property requests such a font for bicameral (having two cases, as with Latin script). This property has no visible effect for scripts that are unicameral (having only one case, as with most of the world's writing systems). Values have the following meanings:

normal

Specifies a font that is not labeled as a small-caps font.

small-caps

Specifies a font that is labeled as a small-caps font. If a genuine small-caps font is not available, user agents should simulate a small-caps font, for example by taking a normal font and replacing the lowercase letters by scaled uppercase characters. As a last resort, unscaled uppercase letter glyphs in a normal font may replace glyphs in a small-caps font so that the text appears in all uppercase letters.


Font-Style

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The font-style property requests normal (sometimes referred to as "roman" or "upright"), italic, and oblique faces within a font family. Values have the following meanings:

normal

Specifies a font that is classified as normal.

oblique

Specifies a font that is classified as oblique. Fonts with Oblique, Slanted, or Incline in their names will typically be labeled oblique in the font database. A font that is labeled oblique may actually have been generated by electronically slanting a normal font.

italic

Specifies a font that is classified as italic, or, if that is not available, one labeled oblique. Fonts with Italic, Cursive, or Kursiv in their names will typically be labeled italic.


Font-Stretch

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The font-stretch property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest :

ultra-condensed

extra-condensed

condensed

 	semi-condensed

normal

semi-expanded

expanded

extra-expanded

ultra-expanded

The relative keyword wider sets the value to the next expanded value above the inherited value (while not increasing it above ultra-expanded); the relative keyword narrower sets the value to the next condensed value below the inherited value (while not decreasing it below ultra-condensed).


Font

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The CSS2 specification supplies the font attribute as a shortcut for setting some of the other font-related properties. This aspect of the font attribute is not supported by Cascade, since Cascade performs the exact same functionality in using the longhand form, and the shortcut syntax would not save the user any amount of time or keystrokes. However, CSS2 also specifies an alternate meaning of the font attribute, which allows the use of system fonts. Values for the font attribute therefore can be as follows:

caption

The font used for captioned controls (e.g., buttons, drop-downs, etc.).

icon

The font used to label icons.

menu

     The font used in menus (e.g., dropdown menus and menu lists).

message-box

     The font used in dialog boxes.

small-caption

     The font used for labeling small controls.

status-bar

     The font used in window status bars.


Text Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The properties in the Text Attributes pane affect the visual presentation of characters, spaces, words, and paragraphs.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:TextAttributes
Text-Indent

Text-Align

Text-Decoration

Text-Shadow

Letter-Spacing

Word-Spacing

Text-Transform

White-Space


Text-Indent

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The text-indent property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box. The box is indented with respect to the left (or right, for right-to-left layout) edge of the line box. User agents should render this indentation as blank space.

The value of  text-indent may be negative, but there may be implementation-specific limits.


Text-Align

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The text-indent property describes how inline content of a block is aligned.

Using the pop-up menu, you can select to have text justified to the left, right, center, or justify (full justification).

Using the edit-box, you can specify a string on which cells in a table column will align. This value applies only to table cells. If set on other elements, it will be treated as left or right, depending on whether direction is ltr, or rtl, respectively.


Text-Decoration

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The text-decoration property describes "decorations" that are added to an element. Values are as follows:

none

Produces no text decoration.

underline

Each line of text is underlined.

overline

Each line of text has a line above it.

line-through

Each line of text has a line through the middle

blink

Text blinks (alternates between visible and invisible).


Text-Shadow

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The text-shadow property describes the shadow which is rendered with element text.

This property accepts a comma-separated list of shadow effects to be applied to the text of the element. The shadow effects are applied in the order specified and may thus overlay each other, but they will never overlay the text itself. Shadow effects do not alter the size of a box, but may extend beyond its boundaries.

Each shadow effect must specify a shadow offset and may optionally specify a blur radius and a shadow color.

A shadow offset is specified with two <length> values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. A negative horizontal length value places the shadow to the left of the text. The second length value specifies the vertical distance below the text. A negative vertical length value places the shadow above the text.

A blur radius may optionally be specified after the shadow offset. The blur radius is a length value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified.

A color value may optionally be specified before or after the length values of the shadow effect. The color value will be used as the basis for the shadow effect. If no color is specified, the value of the color property will be used instead.

Because of the advanced nature of this attribute, Cascade implements the attribute as a user-typed value. An example of a proper text-shadow attribute value is:

     3px 3px red, yellow -3px 3px 2px, 3px -3px


Letter-Spacing

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The letter-spacing property specifies spacing behavior between text characters. Any values indicate spacing in addition to the default spacing. Negative values are allowed, although there may be implementation-specific limitations.


Word-Spacing

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The word-spacing property specifies spacing behavior between text characters. Any values indicate spacing in addition to the default spacing. Negative values are allowed, although there may be implementation-specific limitations.


Text-Transform

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The text-transform property controls capitalization effects of an element's text. Values have the following meanings:

capitalize

Puts the first character of each word in uppercase.

uppercase

Puts all characters of each word in uppercase.

lowercase

Puts all characters of each word in lowercase.

none

No capitalization effects.


White-Space

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The white-space property describes how whitespace inside the element is handled. Values have the following meanings:

normal

This value directs user agents to collapse sequences of whitespace, and break lines as necessary to fill line boxes. Additional line breaks may be created by occurrences of "\A" in generated content (e.g., for the BR element in HTML).

pre

This value prevents user agents from collapsing sequences of whitespace. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content.

nowrap

This value collapses whitespace as for 'normal', but suppresses line breaks within text except for those created by "\A" in generated content (e.g., for the BR element in HTML).


Alignment Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The properties in the Alignment Attributes pane specify the alignment and clipping characteristics for elements appearing on the page.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:AlignmentAttributes
Line-Height

Vertical-Align

Overflow

Visibility

Clip


Line-Height

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The line-height property describes the amount of vertical space a single line of the element will occupy. If the property is set on a block-level element whose content is composed of inline-level elements, it specifies the minimal height of each generated inline box. If the property is set on an inline-level element, it specifies the exact height of each box generated by the element. (Except for inline replaced elements, where the height of the box is given by the height property.)

Values for this property have the following meanings:

normal

Tells user agents to set the computed value to a "reasonable" value based on the font size of the element. The value has the same meaning as <number>. We recommend a computed value for 'normal' between 1.0 to 1.2.

<length>

The box height is set to this length. Negative values are illegal.

<number>

The computed value of the property is this number multiplied by the element's font size. Negative values are illegal. However, the number, not the computed value, is inherited.

<percentage>

The computed value of the property is this percentage multiplied by the element's computed font size.

Negative values are illegal.


Vertical-Align

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The vertical-align attribute affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists. Note: Values of this property have slightly different meanings in the context of tables.

baseline

Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

middle

Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

sub

Lower the baseline of the box to the proper position for subscripts of the parent's box. (This value has no effect on the font size of the element's text.)

super

Raise the baseline of the box to the proper position for superscripts of the parent's box. (This value has no effect on the font size of the element's text.)

text-top

Align the top of the box with the top of the parent element's font.

text-bottom

Align the bottom of the box with the bottom of the parent element's font.

<percentage>

Raise (positive value) or lower (negative value) the box by this distance (a percentage of the line-height value). The value '0%' means the same as 'baseline.'

<length>

Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline.'

The remaining values refer to the line box in which the generated box appears:

top

Align the top of the box with the top of the line box.

bottom

Align the bottom of the box with the bottom of the line box.


Overflow

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The overflow attribute specifies whether the content of a block-level element is clipped when it overflows the element's box (which is acting as a containing block for the content). Values have the following meanings:

visible

This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

hidden

This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. The size and shape of the clipping region is specified by the clip property.

scroll

This value indicates that the content is clipped and that if the user agent uses scrolling mechanism that is visible on the screen (such as a scroll bar or a panner), that mechanism should be displayed for a box whether or not any of its content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. When this value is specified and the target medium is 'print' or 'projection', overflowing content should be printed.

auto

The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes.


Visibility

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The visibility attribute specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the display property to 'none' to suppress box generation altogether). Values have the following meanings:

visible

The generated box is visible.

hidden

The generated box is invisible (fully transparent), but still affects layout.

collapse

If used on elements other than rows or columns, 'collapse' has the same meaning as 'hidden'.


Clip

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The clip attribute applies to elements that have an overflow property with a value other than 'visible'. Values have the following meanings:

auto

The clipping region has the same size and location as the element's box(es).

<shape>

In CSS2, the only valid <shape> value is: rect (<top> <right> <bottom> <left>) where <top>, <bottom> <right>, and <left> specify offsets from the respective sides of the box.

The element's ancestors may also have clipping regions (in case their overflow property is not 'visible'); what is rendered is the intersection of the various clipping regions.


Margin Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The properties in the Margin Attributes pane specify the width of the margin area and the padding area of a box.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:MarginAttributes
Margin-Top

Margin-Bottom

Margin-Left

Margin-Right

Padding-Top

Padding-Bottom

Padding-Left

Padding-Right


Margin-Top

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The margin-top attribute specifies the width of the top margin of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. This is true for margin-top and margin-bottom, except in the page context, where percentages refer to page box height.

auto

The top margin is determined automatically by the user agent.

Values can be negative, but there may be implementation-specific limitations.


Margin-Bottom

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The margin-bottom attribute specifies the width of the bottom margin of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. This is true for margin-top and margin-bottom, except in the page context, where percentages refer to page box height.

auto

The bottom margin is determined automatically by the user agent.

Values can be negative, but there may be implementation-specific limitations.


Margin-Left

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The margin-left attribute specifies the width of the left margin of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. This is true for margin-top and margin-bottom, except in the page context, where percentages refer to page box height.

auto

The left margin is determined automatically by the user agent.

Values can be negative, but there may be implementation-specific limitations.


Margin-Right

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The margin-right attribute specifies the width of the right margin of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block. This is true for margin-top and margin-bottom, except in the page context, where percentages refer to page box height.

auto

The right margin is determined automatically by the user agent.

Values can be negative, but there may be implementation-specific limitations.


Padding-Top

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The padding-top attribute specifies the width of the top padding of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block, even for padding-top and padding-bottom.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.


Padding-Bottom

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The padding-left attribute specifies the width of the left padding of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block, even for padding-top and padding-bottom.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.


Padding-Left

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The padding-top attribute specifies the width of the top padding of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block, even for padding-top and padding-bottom.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.


Padding-Right

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The padding-right attribute specifies the width of the right padding of an element box. Values are as follows:

<length>

Specifies a fixed width.

<percentage>

The percentage is calculated with respect to the width of the generated box's containing block, even for padding-top and padding-bottom.

Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.


Borders Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The properties in the Borders Attributes pane specify the width, color, and style of the border area of a box. These properties apply to all elements. Note: Notably for HTML, user agents may render borders for certain elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:BordersAttributes
Border-Top

Border-Bottom

Border-Left

Border-Right


Border-Top

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-top attribute specifies the width, style, and color of the top border of an element box. Cascade implements this CSS2 shorthand property instead of the individual properties as allowed by CSS2 (there is little to no impact of this)

Values for the width properties are as follows:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Values for the style properties are as follows:

none

No border.

hidden

Almost the same as none.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of groove: the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of inset: the border makes the entire box look as though it were coming out of the canvas.

Values for the color properties are as follows:

The color value is chosen using the color picker, and can be any valid HTML color.


Border-Bottom

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-bottom attribute specifies the width, style, and color of the bottom border of an element box. Cascade implements this CSS2 shorthand property instead of the individual properties as allowed by CSS2 (there is little to no impact of this)

Values for the width properties are as follows:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Values for the style properties are as follows:

none

No border.

hidden

Almost the same as none.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of groove: the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of inset: the border makes the entire box look as though it were coming out of the canvas.

Values for the color properties are as follows:

The color value is chosen using the color picker, and can be any valid HTML color.


Border-Left

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-left attribute specifies the width, style, and color of the left border of an element box. Cascade implements this CSS2 shorthand property instead of the individual properties as allowed by CSS2 (there is little to no impact of this)

Values for the width properties are as follows:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Values for the style properties are as follows:

none

No border.

hidden

Almost the same as none.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of groove: the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of inset: the border makes the entire box look as though it were coming out of the canvas.

Values for the color properties are as follows:

The color value is chosen using the color picker, and can be any valid HTML color.


Border-Right

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-right attribute specifies the width, style, and color of the right border of an element box. Cascade implements this CSS2 shorthand property instead of the individual properties as allowed by CSS2 (there is little to no impact of this)

Values for the width properties are as follows:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Values for the style properties are as follows:

none

No border.

hidden

Almost the same as none.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of groove: the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of inset: the border makes the entire box look as though it were coming out of the canvas.

Values for the color properties are as follows:

The color value is chosen using the color picker, and can be any valid HTML color.


Color/Background Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

CSS properties allow authors to specify the foreground color and background of an element. Backgrounds may be colors or images. Background properties allow authors to position a background image, repeat it, and declare whether it should be fixed with respect to the viewport or scrolled along with the document.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:ColorBackAttributes
Color

Background-Repeat

Background Attachment

Background-Position

Background-Color

Background-Image


Color

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The color attribute describes the foreground color of an element's text content. The value can be any valid HTML color, and is chosen using the color picker.


Background-Repeat

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The background-repeat attribute specifies whether the image is repeated (tiled), and how, if a background image is specified. All tiling covers the content and padding areas of a box. Values have the following meanings:

repeat

The image is repeated both horizontally and vertically.

repeat-x

The image is repeated horizontally only.

repeat-y

The image is repeated vertically only.

no-repeat

The image is not repeated: only one copy of the image is drawn.


Background-Attachment

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The background-attachment attribute specifies, if a background-image is used, whether the image is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').

Even if the image is fixed, it is still only visible when it is in the background or padding area of the element. Thus, unless the image is tiled ('background-repeat: repeat'), it may be invisible.


Background-Position

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The background-position attribute specifies, if a background-image is used, its initial position. Values have the following meanings:

<percentage> <percentage>

With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

<length> <length>

With a value pair of '2cm 2cm', the upper left corner of the image is placed 2cm to the right and 2cm below the upper left corner of the padding area.

top left and left top

Same as '0% 0%'.

top, top center, and center top

Same as '50% 0%'.

right top and top right

Same as '100% 0%'.

left, left center, and center left

Same as '0% 50%'.

center and center center

Same as '50% 50%'.

right, right center, and center right

Same as '100% 50%'.

bottom left and left bottom

Same as '0% 100%'.

bottom, bottom center, and center bottom

Same as '50% 100%'.

bottom right and right bottom

Same as '100% 100%'.


Background-Color

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The background-color attribute sets the background color of an element, either a <color> value or the keyword 'transparent', to make the underlying colors shine through. Colors are chosen using the color picker.


Background-Image

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The background-image attribute sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).


Rendering Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Rendering Attributes pane specifies the settings that directly impact the elements' box model and how it is rendered on the screen.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:RenderingAttributes
Top

Bottom

Left

Right

Display

Position

Direction

Clear

Unicode-Bidi

Float

Z-Index


Top

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The top attribute specifies how far a box's top content edge is offset below the top edge of the box's containing block.

The values have the following meanings:

<length>

The offset is a fixed distance from the reference edge.

<percentage>

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.

auto

The effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.

For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).


Bottom

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The bottom attribute specifies how far a box's bottom content edge is offset above the bottom of the box's containing block.

The values have the following meanings:

<length>

The offset is a fixed distance from the reference edge.

<percentage>

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.

auto

The effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.

For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).


Left

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The left attribute specifies how far a box's left content edge is offset to the right of the left edge of the box's containing block.

The values have the following meanings:

<length>

The offset is a fixed distance from the reference edge.

<percentage>

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.

auto

The effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.

For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).


Right

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The right attribute specifies how far a box's right content edge is offset to the left of the right edge of the box's containing block.

The values have the following meanings:

<length>

The offset is a fixed distance from the reference edge.

<percentage>

The offset is a percentage of the containing block's width (for 'left' or 'right') or height (for 'top' and 'bottom'). For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.

auto

The effect of this value depends on which of related properties have the value 'auto' as well. See the sections on the width and height of absolutely positioned, non-replaced elements for details.

For absolutely positioned boxes, the offsets are with respect to the box's containing block. For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties).


Display

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The display attribute affects how the element box is ultimately rendered.

The values of this property have the following meanings:

block

This value causes an element to generate a principal block box.

inline

This value causes an element to generate one or more inline boxes.

list-item

This value causes an element (e.g., LI in HTML) to generate a principal block box and a list-item inline box.

marker

This value declares generated content before or after a box to be a marker. This value should only be used with :before and :after pseudo-elements attached to block-level elements. In other cases, this value is interpreted as 'inline'.

none

This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). Descendant elements do not generate any boxes either; this behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves.

run-in and compact

These values create either block or inline boxes, depending on context. Properties apply to run-in and compact boxes based on their final status (inline-level or block-level). For example, the 'white-space' property only applies if the box becomes a block box.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption

These values cause an element to behave like a table element.


Position

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The position attribute determines which of the CSS2 positioning algorithms is used to calculate the position of a box.

The values of this property have the following meanings:

static

The box is a normal box, laid out according to the normal flow. The 'left' and 'top' properties do not apply.

relative

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset.

absolute

The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Also, though absolutely positioned boxes have margins, they do not collapse with any other margins.

fixed

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference. In the case of continuous media, the box is fixed with respect to the viewport (and doesn't move when scrolled). In the case of paged media, the box is fixed with respect to the page, even if that page is seen through a viewport (in the case of a print-preview, for example). Authors may wish to specify 'fixed' in a media-dependent way. For instance, an author may want a box to remain at the top of the viewport on the screen, but not at the top of each printed page.


Direction

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The direction attribute specifies the base writing direction of blocks and the direction of embeddings and overrides (see 'unicode-bidi') for the Unicode bidirectional algorithm. In addition, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.

Values for this property have the following meanings:

ltr

Left-to-right direction.

rtl

Right-to-left direction.


Clear

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The clear attribute indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

Values have the following meanings when applied to non-floating block boxes:

left

The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document.

right

The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document.

both

The generated box is moved below all floating boxes of earlier elements in the source document..

none

No constraint on the box's position with respect to floats.

When the property is set on floating elements, it results in a modification of the rules for positioning the float. An extra constraint is added:

•	The top outer edge of the float must be below the bottom outer edge of all earlier left-floating boxes (in the case of 'clear: left'), or all earlier right-floating boxes (in the case of 'clear: right'), or both ('clear: both').


Unicode-Bidi

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The unicode-bidi attribute affects the text direction in the element box.

Values for this property have the following meanings:

normal

The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries.

embed

If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the 'direction' property. Inside the element, reordering is done implicitly.

bidi-override

If the element is inline-level or a block-level element that contains only inline-level elements, this creates an override. This means that inside the element, reordering is strictly in sequence according to the 'direction' property; the implicit part of the bidirectional algorithm is ignored.


Float

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The float attribute specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right

Same as 'left', but content flows on the left side of the box, starting at the top.

none

The box is not floated.

Here are the precise rules that govern the behavior of floats:

The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

A floating box's outer top may not be higher than the top of its containing block.

The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

A floating box must be placed as high as possible.

A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.


Z-Index

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Z-Index attribute specifies:

•	The stack level of the box in the current stacking context.

•	Whether the box establishes a local stacking context.

Values have the following meanings:

<integer>

This integer is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context in which its stack level is '0'.

auto

The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.


Box Dimensions Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Box Dimensions Attributes pane specifies the settings that specify the size of the element's box.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:BoxDimensionsAttributes
Width

Min-Width

Max-Width

Height

Min-Height

Max-Height


Width

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The width attribute specifies the content width of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The width of a non-replaced inline element's boxes is that of the rendered content within them (before any relative offset of children). Recall that inline boxes flow into line boxes. The width of line boxes is given by the their containing block, but may be shorted by the presence of floats.

The width of a replaced element's box is intrinsic and may be scaled by the user agent if the value of this property is different than 'auto'.

Values have the following meanings:

<length>

Specifies a fixed width.

<percentage>

Specifies a percentage width. The percentage is calculated with respect to the width of the generated box's containing block.

auto

The width depends on the values of other properties.

Negative values for 'width' are illegal.


Min-Width

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The min-width attribute allows authors to constrain box widths to a certain range. Values have the following meanings:

<length>

Specifies a fixed minimum computed width.

<percentage>

Specifies a percentage for determining the computed value. The percentage is calculated with respect to the width of the generated box's containing block.


Max-Width

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The max-width attribute allows authors to constrain box widths to a certain range. Values have the following meanings:

<length>

Specifies a fixed maximum computed width.

<percentage>

Specifies a percentage for determining the computed value. The percentage is calculated with respect to the width of the generated box's containing block.


Height

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The height attribute specifies the content height of boxes generated by block-level and replaced elements.

This property does not apply to non-replaced inline-level elements. The height of a non-replaced inline element's boxes is given by the element's (possibly inherited) 'line-height' value.

Values have the following meanings:

<length>

Specifies a fixed height.

<percentage>

Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'.

auto

The height depends on the values of other properties.

Negative values for 'height' are illegal.


Min-Height

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The min-height attribute allows authors to constrain box heights to a certain range. Values have the following meanings:

<length>

Specifies a fixed minimum computed height.

<percentage>

Specifies a percentage for determining the computed value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.


Max-Height

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The max-height attribute allows authors to constrain box heights to a certain range. Values have the following meanings:

<length>

Specifies a fixed maximum computed height.

<percentage>

Specifies a percentage for determining the computed value. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'.


Generated Content Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Generated Content Attributes pane specifies the settings which allow CSS2 to automatically generate content for HTML when selected.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:GeneratedAttribs
Content

Marker-Offset

Counter-Reset

Counter-Increment

Quotes


Content

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The content attribute is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:

<string>

Text content.

<uri>

The value is a URI that designates an external resource. If a user agent cannot support the resource because of the media types it supports, it must ignore the resource. Note: CSS2 offers no mechanism to change the size of the embedded object, or to provide a textual description, like the "alt" or "longdesc" attributes do for images in HTML. This may change in future levels of CSS.

<counter>

Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the named counter at this point in the formatting structure; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counter(name, string)' or 'counter(name, string, style)'. The generated text is the value of all counters with the given name at this point in the formatting structure, separated by the specified string. The counters are rendered in the indicated style ('decimal' by default).

open-quote and close-quote

These values are replaced by the appropriate string from the 'quotes' property.

no-open-quote and no-close-quote

Inserts nothing (the empty string), but increments (decrements) the level of nesting for quotes.

attr(X)

This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn't have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language. Note: In CSS2, it is not possible to refer to attribute values for other elements of the selector.


Marker-Offset

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The marker-offset attribute specifies the distance between the nearest border edges of a marker box and its associated principal box. The offset may either be a user-specified (<length>) or chosen by the user agent ('auto'). Lengths may be negative, but there may be implementation-specific limits.


Counter-Reset

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The counter-reset attribute contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element.


Counter-Increment

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The counter-increment attribute refers to a counter that is not in the scope of any 'counter-reset'; the counter is assumed to have been reset to 0 by the root element.


Quotes

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The quotes attribute specifies quotation marks for any number of embedded quotations. Values have the following meanings:

none

The 'open-quote' and 'close-quote' values of the 'content' property produce no quotations marks.

[<string> <string>]

Values for the 'open-quote' and 'close-quote' values of the 'content' property are taken from this list of pairs of quotation marks (opening and closing). The first (leftmost) pair represents the outermost level of quotation, the second pair the first level of embedding, etc. The user agent must apply the appropriate pair of quotation marks according to the level of embedding.


Lists Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Lists Attributes pane specifies the settings which render classes as lists.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:ListAttribs
List-Style-Type

List-Style-Image

List-Style-Position


List-Style-Type

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The list-style-type attribute specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. Note: Numbered lists improve document accessibility by making lists easier to navigate.

Glyphs are specified with disc, circle, and square. Their exact rendering depends on the user agent.

Numbering systems are specified with:

decimal

Decimal numbers, beginning with 1.

decimal-leading-zero

Decimal numbers padded by initial zeros (e.g., 01, 02, 03, ..., 98, 99).

lower-roman

Lowercase roman numerals (i, ii, iii, iv, v, etc.).

upper-roman

Uppercase roman numerals (I, II, III, IV, V, etc.).

hebrew

Traditional Hebrew numbering.

georgian

Traditional Georgian numbering (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

Traditional Armenian numbering.

cjk-ideographic

Plain ideographic numbers

hiragana

a, i, u, e, o, ka, ki, ...

katakana

A, I, U, E, O, KA, KI, ...

hiragana-iroha

i, ro, ha, ni, ho, he, to, ...

katakana-iroha

I, RO, HA, NI, HO, HE, TO, ...

A user agent that does not recognize a numbering system should use 'decimal'.

Alphabetic systems are specified with:

lower-latin or lower-alpha

Lowercase ascii letters (a, b, c, ... z).

upper-latin or upper-alpha

Uppercase ascii letters (A, B, C, ... Z).

lower-greek

Lowercase classical Greek alpha, beta, gamma...


List-Style-Image

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The list-style-image attribute sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.

For example, the following sets the marker at the beginning of each list item to be the image "ellipse.png".

UL { list-style-image: url("http://png.com/ellipse.png") }


List-Style-Position

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The list-style-position attribute specifies the position of the marker box in the principal block box. Values have the following meanings:

outside

The marker box is outside the principal block box. Note: CSS1 did not specify the precise location of the marker box and for reasons of compatibility, CSS2 remains equally ambiguous. For more precise control of marker boxes, please use markers.

inside

The marker box is the first inline box in the principal block box, after which the element's content flows.


Tables Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Tables Attributes pane specifies the settings which render classes as or in tables.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:TablesAttributes
Table-Layout

Border-Collapse

Empty-Cells

Speak-Header

Caption-Side

Row-Span

Column-Span

Border-Spacing


Table-Layout

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The table-layout attribute controls the algorithm used to lay out the table cells, rows, and columns. Values have the following meaning:

fixed

Use the fixed table layout algorithm

auto

Use any automatic table layout algorithm

The two algorithms are described below.

Fixed table layout

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

The table's width may be specified explicitly with the 'width' property. A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm.

In the fixed table layout algorithm, the width of each column is determined as follows:

•	A column element with a value other than 'auto' for the 'width' property sets the width for that column.

•	Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property sets the width for that column. If the cell spans more than one column, the width is divided over the columns.

•	Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns.

In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the 'overflow' property to determine whether to clip the overflow content.

Automatic table layout

In this algorithm (which generally requires no more than two passes), the table's width is given by the width of its columns (and intervening borders). This algorithm reflects the behavior of several popular HTML user agents at the writing of this specification. UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm.

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

Column widths are determined as follows:

•	Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width. Also, calculate the "maximum" cell width of each cell: formatting then content without breaking lines other than where explicit line breaks occur.

•	For each column, determine a maximum and minimum column width from the cells that span only that column. The minimum is that required by the cell with the largest minimum cell width (or the column 'width', whichever is larger). The maximum is that required by the cell with the largest maximum cell width (or the column 'width', whichever is larger).

•	For each cell that spans more than one column, increase the minimum widths of the columns it spans so that together, they are at least as wide as the cell. Do the same for the maximum widths. If possible, widen all spanned columns by approximately the same amount.

This gives a maximum and minimum width for each column. Column widths influence the final table width as follows:

•	If the 'table' or 'inline-table' element's 'width' property has a specified value (W) other than 'auto', the property's computed value is the greater of W and the minimum width required by all the columns plus cell spacing or borders (MIN). If W is greater than MIN, the extra width should be distributed over the columns.

•	If the 'table' or 'inline-table' element has 'width: auto', the computed table width is the greater of the table's containing block width and MIN. However, if the maximum width required by the columns plus cell spacing or borders (MAX) is less than that of the containing block, use MAX.

A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)

Note: In this algorithm, rows (and row groups) and columns (and column groups) both constrain and are constrained by the dimensions of the cells they contain. Setting the width of a column may indirectly influence the height of a row, and vice versa.


Border-Collapse

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-collapse attribute selects a table's border model. The value separate selects the separated borders border model. The value collapse selects the collapsing borders model.


Empty-Cells

Table of Contents          Balthisar Software Site [image]        Attributes Panes

In the separated borders model, this property controls the rendering of borders around cells that have no visible content. Empty cells and cells with the 'visibility' property set to 'hidden' are considered to have no visible content. Visible content includes "&nbsp;" and other whitespace except ASCII CR ("\0D"), LF ("\0A"), tab ("\09"), and space ("\20").

When this property has the value show, borders are drawn around empty cells (like normal cells).

A value of hide means that no borders are drawn around empty cells. Furthermore, if all the cells in a row have a value of hide and have no visible content, the entire row behaves as if it had 'display: none'.


Speak-Header

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The speak-header attribute specifies whether table headers are spoken before every cell, or only before a cell when that cell is associated with a different header than the previous cell. Values have the following meanings:

once

The header is spoken one time, before a series of cells.

always

The header is spoken before every pertinent cell.


Caption-Side

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The caption-side attribute specifies the position of the caption box with respect to the table box. Values have the following meanings:

top

Positions the caption box above the table box.

bottom

Positions the caption box below the table box.

left

Positions the caption box to the left of the table box.

right

Positions the caption box to the right of the table box.

Captions above or below a 'table' element are formatted very much as if they were a block element before or after the table, except that (1) they inherit inheritable properties from the table, and (2) they are not considered to be a block box for the purposes of any 'compact' or 'run-in' element that may precede the table.

A caption that is above or below a table box also behaves like a block box for width calculations; the width is computed with respect to the width of the table box's containing block.

For a caption that is on the left or right side of a table box, on the other hand, a value other than 'auto' for 'width' sets the width explicitly, but 'auto' tells the user agent to chose a "reasonable width". This may vary between "the narrowest possible box" to "a single line", so we recommend that users do not specify 'auto' for left and right caption widths.

To align caption content horizontally within the caption box, use the 'text-align' property. For vertical alignment of a left or right caption box with respect to the table box, use the 'vertical-align' property. The only meaningful values in this case are 'top', 'middle', and 'bottom'. All other values are treated the same as 'top'.


Row-Span

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The row-span attribute seems to not be implemented in the latest specification document. It has been preserved to legacy reasons.


Column-Span

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The column-span attribute seems to not be implemented in the latest specification document. It has been preserved to legacy reasons.


Border-Spacing

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The border-spacing attribute specifies the spacing of table borders.

The lengths specify the distance that separates adjacent cell borders. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing.

Lengths may not be negative.


Miscellaneous Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Miscellaneous Attributes pane specifies miscellaneous settings.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:MiscAttribs
Cursor

Outline


Cursor

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The cursor attribute specifies the type of cursor to be displayed for the pointing device. Values have the following meanings:

auto

The user agent determines the cursor to display based on the current context.

crosshair

A simple crosshair (e.g., short line segments resembling a "+" sign).

default

The platform-dependent default cursor. Often rendered as an arrow.

pointer

The cursor is a pointer that indicates a link.

move

Indicates something is to be moved.

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize

Indicate that some edge is to be moved. For example, the 'se-resize' cursor is used when the movement starts from the south-east corner of the box.

text

Indicates text that may be selected. Often rendered as an I-bar.

wait

Indicates that the program is busy and the user should wait. Often rendered as a watch or hourglass.

help

Help is available for the object under the cursor. Often rendered as a question mark or a balloon.

<uri>

The user agent retrieves the cursor from the resource designated by the URI. If the user agent cannot handle the first cursor of a list of cursors, it should attempt to handle the second, etc. If the user agent cannot handle any user-defined cursor, it must use the generic cursor at the end of the list.


Outline

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The outline attribute specifies outlines, which differ from borders in these respects:

•	Outlines do not take up space.

•	Outlines may be non-rectangular.

Values for the width properties are as follows:

thin

A thin border.

medium

A medium border.

thick

A thick border.

<length>

The border's thickness has an explicit value. Explicit border widths cannot be negative.

Values for the style properties are as follows:

none

No border.

hidden

Almost the same as none.

dotted

The border is a series of dots.

dashed

The border is a series of short line segments.

solid

The border is a single line segment.

double

The border is two solid lines. The sum of the two lines and the space between them equals the value of border-width.

groove

The border looks as though it were carved into the canvas.

ridge

The opposite of groove: the border looks as though it were coming out of the canvas.

inset

The border makes the entire box look as though it were embedded in the canvas.

outset

The opposite of inset: the border makes the entire box look as though it were coming out of the canvas.

Values for the color properties are as follows:

The color value is chosen using the color picker, and can be any valid HTML color.

In addition, 'invert' can be selected.


Aural Settings Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Aural Settings Attributes pane specifies the basic settings which affect how speech is spoken for elements which are spoken in aural style sheets.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:AuralSettingsAttrib
Volume

Pause-Before

Azimuth

Play-During

Pause-After

Elevation

Speak


Volume

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The volume attribute refers to the median volume of the waveform. In other words, a highly inflected voice at a volume of 50 might peak well above that. The overall values are likely to be human adjustable for comfort, for example with a physical volume control (which would increase both the 0 and 100 values proportionately); what this property does is adjust the dynamic range.

Values have the following meanings:

<number>

Any number between '0' and '100'. '0' represents the minimum audible volume level and 100 corresponds to the maximum comfortable level.

<percentage>

Percentage values are calculated relative to the inherited value, and are then clipped to the range '0' to '100'.

silent

No sound at all. The value '0' does not mean the same as 'silent'.

x-soft

Same as '0'.

soft

Same as '25'.

medium

Same as '50'.

loud

Same as '75'.

x-loud

Same as '100'.


Pause-Before

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The pause-before attribute specifies a pause to be observed before speaking an element's content. Values have the following meanings:

<time>

Expresses the pause in absolute time units (seconds and milliseconds).

<percentage>

Refers to the inverse of the value of the 'speech-rate' property. For example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) then a 'pause-before' of 100% means a pause of 500 ms and a 'pause-before' of 20% means 100ms.

The pause is inserted between the element's content and any 'cue-before' or 'cue-after' content.

Authors should use relative units to create more robust style sheets in the face of large changes in speech-rate.


Azimuth

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The azimuth attribute specifies the left-to-right direction from whence sound originiates.

Values have the following meanings:

<angle>

Position is described in terms of an angle within the range '-360deg' to '360deg'. The value '0deg' means directly ahead in the center of the sound stage. '90deg' is to the right, '180deg' behind, and '270deg' (or, equivalently and more conveniently, '-90deg') to the left.

left-side

Same as '270deg'. With 'behind', '270deg'.

far-left

Same as '300deg'. With 'behind', '240deg'.

left

Same as '320deg'. With 'behind', '220deg'.

center-left

Same as '340deg'. With 'behind', '200deg'.

center

Same as '0deg'. With 'behind', '180deg'.

center-right

Same as '20deg'. With 'behind', '160deg'.

right

Same as '40deg'. With 'behind', '140deg'.

far-right

Same as '60deg'. With 'behind', '120deg'.

right-side

Same as '90deg'. With 'behind', '90deg'.

leftwards

Moves the sound to the left, relative to the current angle. More precisely, subtracts 20 degrees. Arithmetic is carried out modulo 360 degrees. Note that 'leftwards' is more accurately described as "turned counter-clockwise," since it always subtracts 20 degrees, even if the inherited azimuth is already behind the listener (in which case the sound actually appears to move to the right).

rightwards

Moves the sound to the right, relative to the current angle. More precisely, adds 20 degrees. See 'leftwards' for arithmetic.


Play-During

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The play-during attribute is similar to the 'cue-before' and 'cue-after' properties, this property specifies a sound to be played as a background while an element's content is spoken. Values have the following meanings:

<uri>

The sound designated by this <uri> is played as a background while the element's content is spoken.

mix

When present, this keyword means that the sound inherited from the parent element's 'play-during' property continues to play and the sound designated by the <uri> is mixed with it. If 'mix' is not specified, the element's background sound replaces the parent's.

repeat

When present, this keyword means that the sound will repeat if it is too short to fill the entire duration of the element. Otherwise, the sound plays once and then stops. This is similar to the 'background-repeat' property. If the sound is too long for the element, it is clipped once the element has been spoken.

auto

The sound of the parent element continues to play (it is not restarted, which would have been the case if this property had been inherited).

none

This keyword means that there is silence. The sound of the parent element (if any) is silent during the current element and continues after the current element.


Pause-After

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The pause-after attribute specifies a pause to be observed after speaking an element's content. Values have the following meanings:

<time>

Expresses the pause in absolute time units (seconds and milliseconds).

<percentage>

Refers to the inverse of the value of the 'speech-rate' property. For example, if the speech-rate is 120 words per minute (i.e., a word takes half a second, or 500ms) then a 'pause-before' of 100% means a pause of 500 ms and a 'pause-before' of 20% means 100ms.

The pause is inserted between the element's content and any 'cue-before' or 'cue-after' content.

Authors should use relative units to create more robust style sheets in the face of large changes in speech-rate.


Elevation

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The elevation attribute specifies the vertical direction from whence sound originates.

Values of this property have the following meanings:

<angle>

Specifies the elevation as an angle, between '-90deg' and '90deg'. '0deg' means on the forward horizon, which loosely means level with the listener. '90deg' means directly overhead and '-90deg' means directly below.

below

Same as '-90deg'.

level

Same as '0deg'.

above

Same as '90deg'.

higher

Adds 10 degrees to the current elevation.

lower

Subtracts 10 degrees from the current elevation.


Speak

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The speak attribute specifies whether text will be rendered aurally and if so, in what manner (somewhat analogous to the 'display' property). The possible values are:

none

Suppresses aural rendering so that the element requires no time to render. Note, however, that descendants may override this value and will be spoken. (To be sure to suppress rendering of an element and its descendants, use the 'display' property).

normal

Uses language-dependent pronunciation rules for rendering an element and its children.

spell-out

Spells the text one letter at a time (useful for acronyms and abbreviations).

Note the difference between an element whose 'volume' property has a value of 'silent' and an element whose 'speak' property has the value 'none'. The former takes up the same time as if it had been spoken, including any pause before and after the element, but no sound is generated. The latter requires no time and is not rendered (though its descendants may be).


Aural Characteristics Attributes Pane

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The Aural Settings Attributes pane specifies the settings which affect how speech is spoken for elements which are spoken in aural style sheets.

For a description of any of the attributes, click on an appropriate spot in the image below.


sa:AuralCharsAttribs
Cue-Before

Cue-After

Pitch

Speech-Rate

Voice-Family

Richness

Pitch-Range

Stress

Speak-Punctuation

Speak-Numeral


Cue-Before

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The cue-before attribute specifies and auditory "icon" rendered before the content is spoken.

Values are as follows:

<uri>

The URI must designate an auditory icon resource. If the URI resolves to something other than an audio file, such as an image, the resource should be ignored and the property treated as if it had the value 'none'.

none

No auditory icon is specified.


Cue-After

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The cue-after attribute specifies and auditory "icon" rendered after the content is spoken.

Values are as follows:

<uri>

The URI must designate an auditory icon resource. If the URI resolves to something other than an audio file, such as an image, the resource should be ignored and the property treated as if it had the value 'none'.

none

No auditory icon is specified.


Pitch

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The pitch attribute specifies the average pitch (a frequency) of the speaking voice. The average pitch of a voice depends on the voice family. For example, the average pitch for a standard male voice is around 120Hz, but for a female voice, it's around 210Hz.

Values have the following meanings:

<frequency>

Specifies the average pitch of the speaking voice in hertz (Hz).

x-low, low, medium, high, x-high

These values do not map to absolute frequencies since these values depend on the voice family. User agents should map these values to appropriate frequencies based on the voice family and user environment. However, user agents must map these values in order (i.e., 'x-low' is a lower frequency than 'low', etc.).


Speech-Rate

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The speech-rate attribute specifies the speaking rate. Note that both absolute and relative keyword values are allowed (compare with 'font-size'). Values have the following meanings:

<number>

Specifies the speaking rate in words per minute, a quantity that varies somewhat by language but is nevertheless widely supported by speech synthesizers.

x-slow

Same as 80 words per minute.

slow

Same as 120 words per minute

medium

Same as 180 - 200 words per minute.

fast

Same as 300 words per minute.

x-fast

Same as 500 words per minute.

faster

Adds 40 words per minute to the current speech rate.

slower

Subtracts 40 words per minutes from the current speech rate.


Voice-Family

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The voice-family attribute specifies a comma-separated, prioritized list of voice family names (compare with 'font-family'). Values have the following meanings:

<generic-voice>

Values are voice families. Possible values are 'male', 'female', and 'child'.

<specific-voice>

Values are specific instances (e.g., comedian, trinoids, carlos, lani).


Richness

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The richness attribute specifies the richness, or brightness, of the speaking voice. A rich voice will "carry" in a large room, a smooth voice will not. (The term "smooth" refers to how the wave form looks when drawn.)

Values have the following meanings:

<number>

A value between '0' and '100'. The higher the value, the more the voice will carry. A lower value will produce a soft, mellifluous voice.


Pitch-Range

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The pitch-range attribute specifies variation in average pitch. The perceived pitch of a human voice is determined by the fundamental frequency and typically has a value of 120Hz for a male voice and 210Hz for a female voice. Human languages are spoken with varying inflection and pitch; these variations convey additional meaning and emphasis. Thus, a highly animated voice, i.e., one that is heavily inflected, displays a high pitch range. This property specifies the range over which these variations occur, i.e., how much the fundamental frequency may deviate from the average pitch.

Values have the following meanings:

<number>

A value between '0' and '100'. A pitch range of '0' produces a flat, monotonic voice. A pitch range of 50 produces normal inflection. Pitch ranges greater than 50 produce animated voices.


Stress

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The stress attribute specifies variation in average pitch. The perceived pitch of a human voice is determined by the fundamental frequency and typically has a value of 120Hz for a male voice and 210Hz for a female voice. Human languages are spoken with varying inflection and pitch; these variations convey additional meaning and emphasis. Thus, a highly animated voice, i.e., one that is heavily inflected, displays a high pitch range. This property specifies the range over which these variations occur, i.e., how much the fundamental frequency may deviate from the average pitch.

Values have the following meanings:

<number>

A value between '0' and '100'. A pitch range of '0' produces a flat, monotonic voice. A pitch range of 50 produces normal inflection. Pitch ranges greater than 50 produce animated voices.


Speak-Punctuation

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The speak-punctuation attribute specifies how punctuation is spoken. Values have the following meanings:

code

Punctuation such as semicolons, braces, and so on are to be spoken literally.

none

Punctuation is not to be spoken, but instead rendered naturally as various pauses.


Speak-Numeral

Table of Contents          Balthisar Software Site [image]        Attributes Panes

The speak-numeral attribute controls how numerals are spoken. Values have the following meanings:

digits

Speak the numeral as individual digits. Thus, "237" is spoken "Two Three Seven."

continuous

Speak the numeral as a full number. Thus, "237" is spoken "Two hundred thirty seven." Word representations are language-dependent.


def: FAQ
FAQ (fak): n, abbrev. "Frequently Asked Questions" (1) tech. A document with often canned responses to frequently-posed inquiries.


def: WebWarrior Cascade
WebWarrior Cascade

•	 The previous name of Balthisar Cascade. There is no program called Balthisar Cascade prior to version 2.0a1, and there is no program called WebWarrior Cascade after version 1.0b2. Some other entity has predated my claim to the WebWarrior moniker.


def: Class
Class:

•	A rule in CSS2 which consists of a selector which acts as a "name" for the class, and a set of attributes, which describe the class.

•	In the Cascade program, the term "class" is used to refer to any item in the class list. In truth, all you really see in the class list is the selector of the class.


def: Selector
Selector:

•	In CSS2, the portion of a class which serves as the identifier, or name, of the class.

•	In the Cascade program, the term "selector" is often used to refer to an entire class present in the class list.


def: Element Class
Element Class:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. An Element Class is a class that has the same name as an HTML element.


def: Class
Class:

•	A rule in CSS2 which consists of a selector which acts as a "name" for the class, and a set of attributes, which describe the class.

•	In the Cascade program, the term "class" is used to refer to any item in the class list. In truth, all you really see in the class list is the selector of the class.


def: Subclass
Subclass:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. A Subclass is an extension to an element class, which is only selected when the subclass is used, for example, <P.normal> or <P CLASS='normal'>.


def: Pseudo
Pseudoclass or Pseudoelement:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. A Pseudoclass defines attributes which should be used only when the user agent dynamically decides the attributes should be used. For example, A:visited can describe the appearance of visited links on the HTML page. It is up the the user agen to determine if a link is visited, and if so, to apply the A:visited class description instead of the A:link description (for unvisited links).


def: SubPseudo
Pseudoclass of a Subclass:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. A Pseudoclass defines attributes which should be used only when the user agent dynamically decides the attributes should be used. For example, A:visited can describe the appearance of visited links on the HTML page. It is up the the user agen to determine if a link is visited, and if so, to apply the A:visited class description instead of the A:link description (for unvisited links). The purpose of distinguishing whether a pseudoclass is a normal pseudoclass or a pseudoclass of an existing subclass makes application management simpler for the user.


def: Context
Contextual Class:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. A contextual selector only works in the correct context. For example, TR P {...} only renders the specified attributes for <P> when it is nested within a <TR> element. This type of contextual selector implemented by Cascade is called a descendant selector. Other types of contextual selectors can be created using custom/expert classes.


def: ID Class
ID Class:

•	In the Cascade program, the term "class" is used to refer to any item in the class list. An ID class defines attributes which should be used only when the user agent detects the ID property in an element tag, for example, <P ID=anid>.


def: Custom/Expert Selectors
Custom/Expert Selectors:

•	Any Cascade selector or class that is created by the user without the limits of the pre-defined class structure. This allows the experienced user to create advanced classes without sticking to the limitations of Cascade's support for simple classes.


def: @media Descriptor
@Media Descriptors:

•	Any Cascade selector or class that is created by the user specifically for implementing @media rules for multiple media stylesheets. The top-down cascade order of the class list affects which classes are present in the associated media rules. For example, if the class list has a meta-class called "@media aural," then any classes below it (up to the next @media rule) in the list will be exported nested within the @media aural { } rule.


def: User Agent
User Agent:

•	Usually refers to a user's web browser, but can mean anything capable of parsing and processing CSS2 markup.


def: HTML Format
HTML Format:

•	Cascade can export CSS documents as HTML files or as CSS files. With HTML format, the exported file can be easily inserted into an existing HTML document. Alternatively, the exported HTML format is suitable to have HTML markup added to it.


def: CSS Format
CSS Format:

Cascade can export CSS documents as HTML files or as CSS files. With CSS format, the exported file can be easily imported into an existing HTML file using a linking command. Please see Including CSS in HTML.


Quote: there usually are
(there usually are)


Pseudos: List
Pseudo-classes and -elements

Table of Contents	Balthisar Software Site

To see a description of the applicable pseudo-classes and -elements supported in Cascade, follow any of the following links.

 :first-child

 :link

 :visited

 :hover

 :active

 :focus

 :first-line

 :first-letter

 :before

 :after


Pseudos: first-child
:first-child

Table of Contents	Balthisar Software Site

The :first-child pseudo-class matches an element that is the first child of some other element.

For example, the following rule sets the font weight to 'bold' for any EM element that is some descendant of a P element that is a first child:

P:first-child EM { font-weight : bold }


Pseudos: link
:link

Table of Contents	Balthisar Software Site

User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them:

•	The :link pseudo-class applies for links that have not yet been visited.

•	The :visited pseudo-class applies once the link has been visited by the user.

Note: After a certain amount of time, user agents may choose to return a visited link to the (unvisited) ':link' state.

The two states are mutually exclusive.


Pseudos: visited
:visited

Table of Contents	Balthisar Software Site

User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them:

•	The :link pseudo-class applies for links that have not yet been visited.

•	The :visited pseudo-class applies once the link has been visited by the user.

Note: After a certain amount of time, user agents may choose to return a visited link to the (unvisited) ':link' state.

The two states are mutually exclusive.


Pseudos: hover
:hover

Table of Contents	Balthisar Software Site

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

•	The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

•	The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

•	The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.

CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.

User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the font-size of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule.


Pseudos: active
:active

Table of Contents	Balthisar Software Site

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

•	The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

•	The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

•	The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.

CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.

User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the font-size of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule.


Pseudos: focus
:focus

Table of Contents	Balthisar Software Site

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

•	The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).

•	The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

•	The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time.

CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.

User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the font-size of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule.


Pseudos: first-line
:first-line

Table of Contents	Balthisar Software Site

The :first-line pseudo-element applies special styles to the first formatted line of a paragraph. For instance:

P:first-line { text-transform: uppercase }

The above rule means "change the letters of the first line of every paragraph to uppercase". However, the selector "P:first-line" does not match any real HTML element. It does match a pseudo-element that conforming user agents will insert at the beginning of every paragraph.


Pseudos: first-letter
:first-letter

Table of Contents	Balthisar Software Site

The :first-letter pseudo-element may be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar to an inline-level element if its 'float' property is 'none', otherwise it is similar to a floated element.


Pseudos: before
:before

Table of Contents	Balthisar Software Site

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.


Pseudos: after
:after

Table of Contents	Balthisar Software Site

The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.